I have been tasked to recreate this grid layout:
它还说我必须像这样计算列宽:(100/12)*n,其中100是网格容器宽度,12是最大列数,n是列数,例如在第二行有2列,因此在这种情况下n将是2.
我想我做错了.
我是这样做的:
超文本标记语言
<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);
}
但我觉得我做错了.我觉得有更好的办法.也许有人能帮我?