Ответ
Grid — мощный инструмент для создания сложных макетов. Основные свойства:
Контейнер:
display: grid– активация грид-разметкиgrid-template-columns/rows– задаёт размеры колонок/строк (например,1fr 2fr)gap– отступы между элементами (row-gap,column-gap)
Элементы:
grid-column/row– позиционирование (например,grid-column: 1 / 3)grid-area– имя области для размещенияjustify/align-self– выравнивание элемента внутри ячейки
Пример:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.item {
grid-column: span 2;
}Ответ 18+ 🔞
А, гриды! Ну, это ж, блядь, просто песня, а не инструмент, я тебе щас объясню, как с ними не обосраться.
Смотри, вот есть у тебя контейнер, обычный такой div, ни о чём не подозревающий. Чтобы из него сделать, блядь, командный центр, надо ему влепить display: grid. Всё, приехали. Теперь это не просто блок, а, ёпта, разлинованный лист, как в школе, только круче.
А теперь самое вкусное — разлиновка. Две главные команды, которые всё решают:
grid-template-columns— это, сука, сколько у тебя будет вертикальных колонок и какой они ширины. Хочешь три одинаковые?1fr 1fr 1fr. А можноrepeat(3, 1fr), чтобы не пиздеть лишнего.fr— это, типа, доля, свободное место. Овердохуища удобно.grid-template-rows— то же самое, но для горизонтальных строк. Захочешь — настроишь.
Между всеми этими ячейками можно сделать воздух — это gap. Раньше, блядь, марджинами и паддингами выкручивались, а теперь одной строчкой: gap: 20px;. Красота, в рот меня чих-пых!
Ну а теперь про детей, про элементы внутри. Вот они тупо по порядку в ячейки заскакивают. А если хочешь, чтобы какой-то хитрожопый элемент занял две колонки? Да легко! Пишешь ему: grid-column: 1 / 3;. Это значит "займи, сука, от первой линии до третьей". Или grid-column: span 2; — "растянись на две штуки". Строками (grid-row) — абсолютно так же.
Можно вообще, блядь, цирк устроить, назвать области grid-area и расставлять элементы, как в конструкторе. А если какой-то один элемент заартачился и не хочет слушаться общего выравнивания, ему justify-self или align-self впендюрить — и он сразу в стойло встанет.
Смотри, как это выглядит, простейший пример:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.item {
grid-column: span 2; /* Этот буратино займёт две колонки из трёх! */
}Вот и вся магия. Выглядит сложно, а на деле — раз плюнуть. Главное начать использовать, а там, блядь, такой кайф, что на флоаты и флексы смотреть не захочешь.