Грид-темплате-цолумнс / грид-темплате-редови - ЦСС-трикови

grid-template-rowsИ grid-template-columnsсвојства су примарни ЦСС својства за успостављање распоред координате, када елемент је решетка контекст ( display: grid;).

Постоје такође -ms-grid-columnsи -ms-grid-rows, који су стара ИЕ верзија овога. Можда ћете желети да размислите о аутоматском додавању префикса да бисте их примили или не на ваш позив. Било је и чудног периода у којем су били grid-definition-columnsи grid-definition-rows, али то више није ствар.

Ево примера изведеног из Мицрософтове документације:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

Ово дефинише број редова / колона у мрежи, као и њихову димензију.

Ова два својства подржавају листу вредности одвојених размацима. Свака вредност ће дефинисати нови ступац / ред постављањем димензије. Списак од 4 вредности резултираће са 4 колоне / редова. Једна вредност ће створити једну колону / ред.

Прихваћени вредности спадају дужину (као pxи em), проценте, фракција ( fr; види доле), auto(или fit-content), min-content, max-content, и minmax(), или repeat()функцију.

У горњем примеру кода то значи:

Колона 1 ( аутоматска кључна реч): Колона се прилагођава садржају у колони.
Колона 2 („100 пиксела“): Колона је широка 100 пиксела.
Колона 3 („1фр“): Колона заузима једну фракцијску јединицу преосталог простора.
Колона 4 („2фр“): Колона заузима две фракцијске јединице преосталог простора.

Ред 1 („50пк“): Ред је висок 50 пиксела.
Ред 2 („5ем“): Ред је висок 5 емс.
Ред 3 ( кључна реч са минималним садржајем ): Ред је толико мали колико дозвољава садржај.
Ред 4 ( аутоматска кључна реч): Ред се прилагођава садржају у реду.

понављање()

repeat()Функција је специјално дизајниран за овај модул. Омогућава вам да дефинишете образац поновљен Кс пута. Као repeat(6, 1fr);. Рецимо да желите да направите 12 колона једнаке ширине размакнуте једна од друге за маржу од 1%; могли бисте дефинисати 1fr repeat(11, 1% 1fr). То је исто као 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Прва јединица

frЈединица може да се користи за grid-rowsи grid-columnsвредности. То значи „делић расположивог простора“. Схватите то као проценте за расположиви простор када сте скинули колоне / редове фиксне величине и засноване на садржају. Као што спецификација каже:

Дистрибуција разломљеног простора настаје након што су све величине дужине или редови и колоне засноване на садржају достигле свој максимум.

Повезан

Наш најбољи ресурс за све ствари у ЦСС мрежи је наш Комплетни водич за ЦСС мрежу.

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.