Underdoggit
@Underdoggit

Как управлять колонками в css grid layout?

Вопрос: Есть грид раскладка, понимаю все, кроме как задать ширину колонки на определенном row. Если задаю grid-template-columns: он создает новые колонки. Как задавать колонкам явные размеры в определенном row? Допустим 1ый row - 1 колонка которая сейчас тянется по автомату на 1fr - задать ей ширину 2х колонок. Во втором row колонкам задан явный размер и grid-gap.
5cbcb4dd41e22040649401.png
.example-calculation__left-block
    display: grid
    grid-template-rows: auto auto auto
    grid-template-areas: "ect ect ect" "ecdw ecdw ecdw" "eccw eccw eccw"

.example-calculation__title
    grid-area: ect

.example-calculation__data-wrapper
    grid-area: ecdw

.example-calculation__cost-wrapper
    grid-area: eccw
  • Вопрос задан
  • 1564 просмотра
Решения вопроса 1
Смысл CSS Grid как раз в том, что в каждой строке одинаковое кол-во ячеек. Можно объединять несколько из них, можно выводить свои дочерние элементы не с первой ячейки ряда, но сделать разные ширины ячеек разных рядов - нельзя, это против концепции грида (здесь примерно как в Excel относительно строк и столбцов).
подробнее см. здесь
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы