3 равни колони CSS Grid Layout
Проектирайте визуално оформления на CSS Grid: задайте колони, редове и празнини, след това въведете имена на области в клетки, за да изградите зони на шаблони на мрежата — с предварителен преглед на живо и копируеми CSS и HTML.
Резултат
Тази страница отваря генератора на мрежата, настроен на три колони с еднаква ширина в един ред, с изключени наименувани области — оформлението е само repeat(3, 1fr), най-краткият начин да се каже „три колони, които винаги разделят наличната ширина равномерно“.
Колоните с еднаква ширина са работният кон на картовите мрежи, ценови таблици и галерии с изображения: никоя област не се нуждае от наименуване, защото всяка колона играе една и съща роля, така че обикновеното оразмеряване на пистата е по-ясно, отколкото би било декларацията за зони с шаблони на мрежата. Добавете ред и същите три песни се повтарят отдолу, все още идеално равномерни.
Увеличете броя на колоните за по-плътна решетка или включете наименувани области, ако следваща колона трябва да се откроява от останалите — CSS и HTML по-долу се актуализират в момента, в който го направите. Всичко работи от страна на клиента, така че няма нищо за качване и какво да чакате.