Как изменить расположение последнего элемента в сетке CSS?

Question

Норманн

css-grid , css

Как изменить расположение последнего элемента в сетке CSS?

Как изменить сетку, чтобы на последней строке размещалось только два элемента равной ширины, занимающих всю ширину родителя? Вот мой текущий код, но он не работает правильно:
```
.grid {
  grid-template-areas:
  "a a a
   a a a
   a a a
   a a a 
   b b"
}
```

23 октября 2023 г. 9:38

Ответы на вопрос 4

a b b a

 a b b a

Похожие вопросы

Answer 1

Чтобы изменить расположение последнего элемента в сетке CSS и разместить на последней строке только два элемента равной ширины, можно использовать свойство grid-column. 

Вот пример кода, который достигает такого результата:

```css
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
}

.grid > *:nth-last-child(-n+2) {
  grid-column: span 2;
}
```

В этом примере мы задаем сетку с тремя колонками и автоматическими строками. Затем мы выбираем последние два элемента с помощью селектора nth-last-child, который выбирает элементы, начиная с последнего. Затем мы применяем свойство grid-column к выбранным элементам и указываем ему значение span 2, которое указывает на то, что каждый из выбранных элементов должен занимать две колонки в сетке.

Answer 2

 c c d d
2fr 1fr 1fr 2fr