它还说我必须像这样计算列宽:(100/12)*n,其中100是网格容器宽度,12是最大列数,n是列号,例如在第二行中有 2 列,因此本例中的 n 将为 2。
我想我做错了。
我的做法是这样的:
HTML
<div class="grid-container">
<div class="row-1 row">
<div class="column-12">12 kollonas</div>
</div>
<div class="row-2 row">
<div class="column-6">6 kollonas</div>
<div class="column-6">6 kollonas</div>
</div>
<div class="row-3 row">
<div class="column-4">4 kollonas</div>
<div class="column-4">4 kollonas</div>
<div class="column-4">4 kollonas</div>
</div>
<div class="row-4 row">
<div class="column-3">3 kollonas</div>
<div class="column-3">3 kollonas</div>
<div class="column-3">3 kollonas</div>
<div class="column-3">3 kollonas</div>
</div>
<div class="row-5 row">
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
</div>
<div class="row-6 row">
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
</div>
</div>
CSS
[class*='column-']{
width: 100%;
float: left;
min-height: 1px;
padding: 15px 0;
box-sizing: border-box;
}
body{
background-color: rgb(255, 219, 245);
font-family: Arial, Helvetica, sans-serif;
}
.grid-container{
display: grid;
grid-gap: 4px;
text-align: center;
width: 90%;
margin: auto;
row-gap: 20px;
}
.column-12{
grid-column-start: 1;
grid-column-end: 12;
}
.row{
display: grid;
grid-column-start: 1;
grid-column-end: 12;
grid-gap: 20px;
}
.row div{
background-color: white;
height: 50px;
border-radius: 5px;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.205);
color: rgb(158, 58, 167)
}
.row-2{
grid-template-columns: repeat(2, 1fr);
}
.row-3{
grid-template-columns: repeat(3, 1fr);
}
.row-4{
grid-template-columns: repeat(4, 1fr);
}
.row-5{
grid-template-columns: repeat(6, 1fr);
}
.row-6{
grid-template-columns: repeat(12, 1fr);
}
但我感觉我做错了。我感觉有更好的方法。也许有人可以帮助我?
这不是我会做的方式,但它有效。你真的不需要所有这些行 div。只需让网格容器有 12 列,然后告诉每个列类要跨越多少列。
[class*='column-'] {
min-height: 1px;
padding: 15px 0;
box-sizing: border-box;
}
body {
background-color: rgb(255, 219, 245);
font-family: Arial, Helvetica, sans-serif;
}
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 4px;
text-align: center;
width: 90%;
margin: auto;
row-gap: 20px;
}
.grid-container div {
background-color: white;
height: 50px;
border-radius: 5px;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.205);
color: rgb(158, 58, 167)
}
.column-12 {
grid-column: span 12;
}
.column-6 {
grid-column: span 6;
}
.column-4 {
grid-column: span 4;
}
.column-3 {
grid-column: span 3;
}
.column-2 {
grid-column: span 2;
}
.column-1 {
grid-column: span 1;
}
<div class="grid-container">
<div class="column-12">12 kollonas</div>
<div class="column-6">6 kollonas</div>
<div class="column-6">6 kollonas</div>
<div class="column-4">4 kollonas</div>
<div class="column-4">4 kollonas</div>
<div class="column-4">4 kollonas</div>
<div class="column-3">3 kollonas</div>
<div class="column-3">3 kollonas</div>
<div class="column-3">3 kollonas</div>
<div class="column-3">3 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-2">2 kollonas</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
<div class="column-1">1</div>
</div>