CSS сетки не правильно размечает области - PullRequest
Новая
       3

CSS сетки не правильно размечает области

0 голосов
/ 24 сентября 2019

У меня есть следующий HTML 

.area-page-area1 {
  grid-area: area1;
}

.area-page-area2 {
  grid-area: area2;
}

.area-page-area3 {
  grid-area: area3;
}

.area-page-area4 {
  grid-area: area4;
}

.area-page-area5 {
  grid-area: area5;
}

.area-page-area6 {
  grid-area: area6;
}

.area-page-area7 {
  grid-area: area7;
}

.area-page {
  grid-template-columns: 0% 50.8% 100%;
  grid-template-rows: 0% 25% 50% 83.3333% 100%;
  display: grid;
  grid-template-areas: "area0 area4" "area1 area5" "area2 area6" "area3 area7";
  width: 500px;
  height: 600px;
}
<div class="area-page">
  <div class="area-page-area0">{ 0 }
  </div>
  <div class="area-page-area1">{ 1 }
  </div>
  <div class="area-page-area2">{ 2 }
  </div>
  <div class="area-page-area3">{ 3 }
  </div>
  <div class="area-page-area4">{ 4 }
  </div>
  <div class="area-page-area5">{ 5 }
  </div>
  <div class="area-page-area6">{ 6 }
  </div>
  <div class="area-page-area7">{ 7 }
  </div>
</div>

Я бы ожидал, что области будут расположены так, как я определил в grid-template-areas.К сожалению, первая область в строке кажется раздавленной где-то в начале, почти как если бы существовала другая область для ее размещения.

Есть ли что-то, что я забыл установить, чтобы сделать эту работу?

Ответы [ 2 ]

2 голосов
/ 24 сентября 2019

Вот статья W3 Schools по теме

Вместо того, чтобы использовать проценты, которые дают вам более жесткий способ измерения, я бы рекомендовал использовать «fr» обычно 

* {
  border: solid 1px grey;
  padding: 10px;
}

.area-page {
   display: grid;
  grid-template-columns: 50% 50%; <!-- Changing these percentages, width of the area that it is within. I'd recommend the unit "fr", or fraction. How you'd apply it "grid-template-columns: fr fr;" Which would give you a similar result as the 50% 50%. --!>
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-areas: "area0 area4" 
                       "area1 area5" 
                       "area2 area6" 
                       "area3 area7";
  width: 200px;
  height: 200px;
}

.area-page-area0 {
  grid-area: area0;
  background: yellow;
  color: black;
}
.area-page-area1 {
  grid-area: area1;
  background: blue;
  color: white;
}

.area-page-area2 {
  grid-area: area2;
  background: green;
  color: white;
}

.area-page-area3 {
  grid-area: area3;
  background: violet;
  color: white;
}

.area-page-area4 {
  grid-area: area4;
  background: yellow;
  color: black;
}

.area-page-area5 {
  grid-area: area5;
  background: pink;
  color: white;
}

.area-page-area6 {
  grid-area: area6;
  background: purple;
  color: white;
}

.area-page-area7 {
  grid-area: area7;
  background: orange;
  color: black;
}
<div class="area-page">
  <div class="area-page-area0">{ Index 0 }
  </div>
  <div class="area-page-area1">{ Index 1 }
  </div>
  <div class="area-page-area2">{ Index 2 }
  </div>
  <div class="area-page-area3">{ Index 3 }
  </div>
  <div class="area-page-area4">{ Index 4 }
  </div>
  <div class="area-page-area5">{ Index 5 }
  </div>
  <div class="area-page-area6">{ Index 6 }
  </div>
  <div class="area-page-area7">{ Index 7 }
  </div>
</div>
1 голос
/ 24 сентября 2019

Они согнуты, потому что вы определили, что первый столбец и строка имеют ширину 0%.Каждый из этих процентов будет частью вашей определенной ширины / высоты и будет суммироваться до 100%.

При определении пространства для grid-template-rows каждая единица пространства fr, px или% будет занимать частьпространства из родительского контейнера.Посмотрите на пример ниже.Также читайте в документации.https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

* {
  border: solid 1px grey;
  padding: 10px;
}

.area-page {
   display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-areas: "area0 area4" 
                       "area1 area5" 
                       "area2 area6" 
                       "area3 area7";
  width: 200px;
  height: 200px;
}


.area-page-area1 {
  grid-area: area1;
}

.area-page-area2 {
  grid-area: area2;
}

.area-page-area3 {
  grid-area: area3;
}

.area-page-area4 {
  grid-area: area4;
}

.area-page-area5 {
  grid-area: area5;
}

.area-page-area6 {
  grid-area: area6;
}

.area-page-area7 {
  grid-area: area7;
}
<div class="area-page">
  <div class="area-page-area0">{ 0 }
  </div>
  <div class="area-page-area1">{ 1 }
  </div>
  <div class="area-page-area2">{ 2 }
  </div>
  <div class="area-page-area3">{ 3 }
  </div>
  <div class="area-page-area4">{ 4 }
  </div>
  <div class="area-page-area5">{ 5 }
  </div>
  <div class="area-page-area6">{ 6 }
  </div>
  <div class="area-page-area7">{ 7 }
  </div>
</div>
...