Как поменять последнюю линию css grid?

Ссылка скопирована
CSS CSS Grid JavaScript
1 ответ

Есть сетка 5х3 блоков, каждый из которых 1fr в ширину и высоту.
Хочу сделать сделать так, чтобы на последней строке размещалось только 2 элемента, в соотношении 1:1, на всю ширину родителя.
Пробовала сделать что-то подобное:

.grid {   grid-template-areas:   "a a a    a a a    a a a    a a a     b b" }

.grid { grid-template-areas: "a a a a a a a a a a a a b b" }

Но это не сработало нужным образом

Дополнительно:

a b b a a b b a a b b a a b b a c c d d  2fr 1fr 1fr 2fr

a b b a a b b a a b b a a b b a c c d d 2fr 1fr 1fr 2fr

  • Даже не подумал о таком, спасибо!
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Никита Орлов Ответ

Для изменения последней строки в CSS Grid, вам необходимо использовать свойство grid-template-rows. Это свойство позволяет задать ширину строк в сетке CSS Grid.

Прежде всего, у вас должно быть определено количество строк в сетке. Например, если у вас есть сетка с тремя строками, вы можете задать их ширину следующим образом:

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px auto; /* первая строка 100px, вторая 200px, третья автоматическая */
}

.grid-container { display: grid; grid-template-rows: 100px 200px auto; /* первая строка 100px, вторая 200px, третья автоматическая */ }

Если вы хотите изменить последнюю строку, вам нужно изменить значение последнего параметра в свойстве grid-template-rows. Например, если вы хотите, чтобы последняя строка была 150px вместо автоматической высоты, вы можете изменить свои стили следующим образом:

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px 150px; /* первая строка 100px, вторая 200px, третья 150px */
}

.grid-container { display: grid; grid-template-rows: 100px 200px 150px; /* первая строка 100px, вторая 200px, третья 150px */ }

Таким образом, вы сможете легко изменить ширину последней строки в вашей сетке CSS Grid, используя свойство grid-template-rows. Не забывайте адаптировать значения под свои потребности и дизайн вашего проекта.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ VPN Как правильно настроить vless для Android TV? 1 ответ Visual Studio Code Как лучше убрать тень у панели слева в VS Code? 1 ответ