CSS Grid Генератор
Настройте Вашите колони и редове, плъзнете по клетките, за да разположите елементи, и копирайте CSS кода с подходящ HTML с едно щракване.
Вашата мрежа се изгражда директно във Вашия браузър. Нищо от това, което настройвате тук, не се изпраща към BroBroGo.
ЧЗВ
Как да разполагам елементи върху мрежата?
Натиснете и плъзнете по клетките, за да очертаете правоъгълник — когато пуснете бутона, той се превръща в разположен елемент, обхващащ тези колони и редове. Всеки начертан елемент получава собствено grid-column и grid-row правило в CSS и съответстващ div в HTML. Елементите могат да се застъпват, като начертаният по-късно застава най-отгоре; използвайте символа „×“ върху елемента, за да го премахнете.
Могат ли колоните и редовете да бъдат с различни размери?
Да. Всеки ред или колона (track) има собствено поле за размер, където можете да въведете всякаква grid стойност — 1fr, 200px, auto, min-content или minmax(120px, 1fr). Редовете/колоните, които споделят еднакъв размер, се групират в repeat(), за да остане изходният код кратък. Разстоянието между колоните и редовете се задават отделно и се обединяват в общо свойство gap, когато съвпадат.
Какво да правя с генерирания код?
Копирайте CSS и HTML кодовете заедно. HTML кодът Ви дава контейнера с по един div за всеки елемент, а CSS дефинира мрежата и позиционира всеки елемент. Поставете и двата кода във Вашия проект и ще получите същото оформление, което сте начертали тук.