如何创建最大行数等于8的网格系统

佩德罗·库托（Pedro Couto）

我需要创建一个网格系统作为图像的示例。最多行数为8；单元号是可变的，可以是12、20,100等。在此处输入图像描述

西里尔

您可以设置：

（使用完整的资源：适合您：https ://css-tricks.com/snippets/css/complete-guide-grid/和https://gridbyexample.com/）

一个8行的网格模板，
然后是具有自动填充（或自动拟合）功能的模板
最后设置网格以按列填充列：

例子

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8em;, 1fr));
  grid-template-rows: repeat(8, 1fr);
  grid-auto-flow: column;
  margin: 0;
  min-height: 100vh;/* optionnal */
  gap:2px;
}


/* see the div */

body {
  counter-reset: divs;
}

div {
  border: 1px solid;
  display:flex;
}

div:before {
font-size:calc(12px + 3vw) ;margin:auto;
  counter-increment: divs;
  content: counter(divs)
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。