Выровнять элементы сетки CSS - PullRequest
Новая
       29

Выровнять элементы сетки CSS

0 голосов
/ 27 февраля 2019

Я начинаю учиться работать с сеткой CSS.Я делаю сетку, там выглядит так .Мне нужно, чтобы элементы 3 и 4 были выровнены с элементом 1 по горизонтали.

Высота на всех предметах должна составлять 700 пикселей, так что часть должна соответствовать.Я думаю, что я делаю что-то не так в коде строк и столбцов? 

.wrapper {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-gap: 1em;
}

.wrapper>div {
  background-color: #eee;
  padding: 1em;
}

.wrapper>div:nth-child(odd) {
  background-color: #ddd;
}

.item1 {
  grid-row: 1 / 3;
  grid-column: 1/6;
  height: 700px;
}

.item2 {
  grid-row: 1 / 1;
  grid-column: 6/12;
  height: 340px;
}

.item3 {
  grid-row: 2 / 3;
  grid-column: 6/9;
  height: 350px;
}

.item4 {
  grid-row: 2/3;
  grid-column: 9/12;
  height: 350px;
}
<div class="wrapper">
  <div class="item1">
    This is item 1
  </div>
  <div class="item2">
    This is item 2
  </div>
  <div class="item3">
    This is item 3
  </div>
  <div class="item4">
    This is item 4
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

Несколько изменений должны помочь.Во-первых, измените grid-gap на wrapper с 1em на 10px.Это помогает с проблемой разрыва с 1em, обычно равным 16px по умолчанию.Затем просто добавьте box-sizing: border-box; к .wrapper > div.

Вот рабочий пример: 

.wrapper {
  display:grid;
  grid-template-columns:repeat(11,1fr);
  grid-gap: 10px;
}	

.wrapper > div {
  background-color: #eee;
  padding: 1em;
  box-sizing: border-box;
}

.wrapper > div:nth-child(odd) {
  background-color: #ddd;
}

.item1 {
  grid-row: 1 / 3;
  grid-column: 1/6;
  height: 700px;
}
.item2 {
  grid-row: 1 / 1;
  grid-column: 6/12;
  height: 340px;
}
.item3 {
  grid-row: 2 / 3;
  grid-column: 6/9;
  height: 350px;
} 
.item4 {
  grid-row:2/3;
  grid-column: 9/12;
  height: 350px;
}
<div class="wrapper">
  	<div class="item1">
      This is item 1
    </div>
    <div class="item2">
      This is item 2
    </div>
    <div class="item3">
      This is item 3
    </div>
    <div class="item4">
      This is item 4
    </div>
</div>
0 голосов
/ 27 февраля 2019

Ваша проблема была padding:1em на каждом из элементов сетки.Это делает их больше, чем вы ожидаете.

Я исправил ваш пример ниже.Надеюсь, это поможет: -) 

.wrapper {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-gap: 1em;
}

.wrapper > div {
  background-color: #eee;
  padding: 1em;
}
.wrapper > div:nth-child(odd) {
  background-color: #ddd;
}
.item1 {
  grid-row: 1 / 3;
  grid-column: 1/6;
  height: 700px;
}
.item2 {
  grid-row: 1 / 1;
  grid-column: 6/12;
}
.item3 {
  grid-row: 2 / 3;
  grid-column: 6/9;
}
.item4 {
  grid-row: 2/3;
  grid-column: 9/12;
}
<div class="wrapper">
  <div class="item1">This is item 1</div>
  <div class="item2">This is item 2</div>
  <div class="item3">This is item 3</div>
  <div class="item4">This is item 4</div>
</div>
...