Блог

Главная - Вопросы по программированию - Как я могу создать определенную форму макета, используя области сетки-шаблона css?

Как я могу создать определенную форму макета, используя области сетки-шаблона css?

#html #css #css-grid

Вопрос:

Я пытаюсь создать макет квадратных дивов примерно так:

       xx
     xxxx
    xxxxxx
    xxxxxx
     xxxx
      xx

Я не так хорошо понимаю область шаблона-сетки css.
Я пытался:

 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;
}
}

Если бы я мог попросить совета и помощи, спасибо.
Я вижу только один квадрат.

Ответ №1:

во-первых, вы не можете использовать один и тот же идентификатор для более чем одного элемента. Во-вторых, вы можете достичь этого с помощью flexbox, центрируя и изменяя размеры дочерних элементов по желанию без какой-либо сетки 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>

Комментарии:

1. Ах, может быть, я не расспрашивал подробно. Мне нужна каждая отдельная коробка (их 24).

2. Вы можете сделать каждую строку гибкой и вложить в нее столько элементов, сколько вам нужно в каждой строке

Ответ №2:

Я просто сделал это так на данный момент (это выглядит грязно, но выглядит нормально):

 .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>
Метки: ,