Выравнивание элементов сетки CSS
Я начинаю учиться работать с сеткой 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
Ваша проблема заключалась в 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>@McDuck4 Я понимаю, что вы имеете в виду :-) Я исправил свой ответ новой информацией. Если вы удалите высоту для всех элементов, кроме .item1. Затем вы сможете добавить больше внизу, не ограничивая обертку.
Большое спасибо за ответ. Итак, первый столбец будет контролировать высоту? Так что я могу также использовать это для других элементов сетки?
Это просто самый большой элемент в этой строке, поэтому элементы на другой стороне будут увеличиваться до любого размера. Если вы добавите больше строк внизу, просто добавьте высоту для этого элемента. Вы также можете использовать grid-template-rows, чтобы сделать каждую строку разного размера.
Пара изменений должна помочь. Во-первых, измените grid-gap на wrapper с 1em на 10px. Это помогает решить проблему с промежутком, поскольку 1em по умолчанию обычно составляет 16 пикселей. Затем просто добавьте 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>Спасибо за ответ. Я вижу, что это работает. Но я думаю, что у меня возникнут проблемы, если я захочу построить больше сеток. Fx, если я хочу новую строку с 2 столбцами. Высота элемента будет 400px. Разве это не будет проблематично, когда я установлю высоту на обертке? photobox.co.uk/my/photo/full?photo_id=501690173342
Спасибо за ответ. Я вижу, что это работает. Но я думаю, что у меня возникнут проблемы, если я захочу построить больше сеток. Fx, если я хочу новую строку с 2 столбцами. Высота элемента будет 400px. Разве это не будет проблематично, когда я установлю высоту на обертке? photobox.co.uk/my/photo/full?photo_id=501690173342