如何使用css grid-template-areas创建一个特定的布局形状?

Question

我正在尝试创建一个像这样的方形div布局:

xx
xxxx
xxxxxx
xxxxxx
xxxx
xx

我不太理解css grid-template-area。我试着:

html
<div class='container'>
<div id="square"></div>
<div id="square"></div>
<div id="square"></div>
<div id="square"></div>
...
</div>

css
.container {
display: grid;
grid-template-areas: 
"... ... square square ... ..."
"... square square square square ..."
"square square square square square square"
"... square square square square ..."
"... ... square square ... ..."
;
#square {
width: 50px;
height: 50px;
grid-area: square;
}
}

如果我能要求指点和帮助，谢谢。我只能看到一个正方形。

Answer 1

我只是像现在这样做(它看起来很脏，但它显示良好):

.grid {
width: 80%;
display: grid;
margin: 0 auto;
align-items: center;
justify-content: center;
grid-template-columns: repeat(6, 50px);
grid-template-areas: 
". . two twoa . ."
". four foura fourb fourc ."
"sixa sixb sixc sixd sixe sixf"
"six2 six2a six2b six2c six2d six2e"
". four2 four2a four2b four2c ."
". . two2 two2a . ."
;
}
.hole {
height: 50px;
width: 50px;
background-image: url('../images/dirt.png');
background-position: bottom;
background-size: cover;
}
.two-hole {
grid-area: two;
}
.two-holeA {
grid-area: twoa;
}
.two-hole2 {
grid-area: two2;
}
.two-hole2A {
grid-area: two2a;
}
.four-hole {
grid-area: four;
}
.four-holeA {
grid-area: foura;
}
.four-holeB {
grid-area: fourb;
}
.four-holeC {
grid-area: fourc;
}
.four-hole2 {
grid-area: four2;
}
.four-hole2A {
grid-area: four2a;
}
.four-hole2B {
grid-area: four2b;
}
.four-hole2C {
grid-area: four2c;
}
.six-holeA {
grid-area: sixa;
}
.six-holeB {
grid-area: sixb;
}
.six-holeC {
grid-area: sixc;
}
.six-holeD {
grid-area: sixd;
}
.six-holeE {
grid-area: sixe;
}
.six-holeF {
grid-area: sixf;
}
.six-hole2 {
grid-area: six2;
}
.six-hole2A {
grid-area: six2a;
}
.six-hole2B {
grid-area: six2b;
}
.six-hole2C {
grid-area: six2c;
}
.six-hole2D {
grid-area: six2d;
}
.six-hole2E {
grid-area: six2e;
}

<div class="grid">
<div class="hole two-hole" id="1">1</div>
<div class="hole two-holeA" id="2">2</div>
<div class="hole four-hole" id="3">3</div>
<div class="hole four-holeA" id="4">4</div>
<div class="hole four-holeB" id="5">5</div>
<div class="hole four-holeC" id="6">6</div>
<div class="hole six-holeA" id="7">7</div>
<div class="hole six-holeB" id="8">8</div>
<div class="hole six-holeC" id="9">9</div>
<div class="hole six-holeD" id="10">0</div>
<div class="hole six-holeE" id="11">11</div>
<div class="hole six-holeF" id="12">12</div>
<div class="hole six-hole2" id="13">13</div>
<div class="hole six-hole2A" id="14">14</div>
<div class="hole six-hole2B" id="15">15</div>
<div class="hole six-hole2C" id="16">16</div>
<div class="hole six-hole2D" id="17">17</div>
<div class="hole six-hole2E" id="18">18</div>
<div class="hole four-hole2" id="19">19</div>
<div class="hole four-hole2A" id="20">2</div>
<div class="hole four-hole2B" id="21">22</div>
<div class="hole four-hole2C" id="22">23</div>
<div class="hole two-hole2" id="23">24</div>
<div class="hole two-hole2A" id="24">25</div>
</div>

Answer 2

首先，不能对多个元素使用相同的id。其次，你可以使用flexx来实现这一点，根据需要调整子元素的居中和大小，而不需要任何CSS网格，如下所示

#container{
display: flex;
flex-direction: column;
align-items: center;
}
.rhombus{
background:red;
width:90vw;
height: 13vh;
margin: 1vh;
}
#first-row{
width:30vw
}
#second-row{
width:60vw
}
#third-row{
width:90vw
}
#fourth-row{
width:90vw
}
#fifth-row{
width:60vw
}
#sixth-row{
width:30vw
}

<div id="container">
<div class="rhombus" id="first-row"></div>
<div class="rhombus" id="second-row"></div>
<div class="rhombus" id="third-row"></div>
<div class="rhombus" id="fourth-row"></div>
<div class="rhombus" id="fifth-row"></div>
<div class="rhombus" id="sixth-row"></div>
</div>