Мрежа-шаблон-колони / мрежа-шаблон-редове - CSS-трикове

В grid-template-rowsи grid-template-columnsсвойства са основният CSS свойства за създаване на оформление решетка, след като елементът е контекст решетка ( display: grid;).

Има също -ms-grid-columnsи -ms-grid-rows, които са старата IE версия на това. Може да помислите за автоматично префиксиране, за да получите или не вашето обаждане. Имаше и странен период, когато те бяха grid-definition-columnsи grid-definition-rows, но това вече не е нещо.

Ето пример, извлечен от документацията на Microsoft:

.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 („100px“): Колона е широка 100 пиксела.
Колона 3 („1fr“): Колона заема една дробна част от оставащото пространство.
Колона 4 (“2fr”): Колона заема две части от останалото пространство.

Ред 1 („50px“): Редът е висок 50 пиксела.
Ред 2 („5em“): Редът е висок 5 ems.
Ред 3 ( ключова дума с минимално съдържание ): Редът е толкова малък, колкото съдържанието ще го остави.
Ред 4 ( автоматично ключова дума): Редът се приспособява към съдържанието в реда.

повторение ()

Най- repeat()функцията е специално проектиран за този модул. Тя ви позволява да дефинирате модел, повторен X пъти. Харесвам 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

В frустройството може да се използва за grid-rowsи grid-columnsстойности. Той означава „част от наличното пространство“. Мислете за това като проценти за наличното пространство, когато сте свалили колони / редове с фиксиран размер и базирани на съдържанието. Както казва спецификацията:

Разпределението на дробното пространство се случва, след като всички размери „дължина“ или базирани на съдържание редове и колони достигнат своя максимум.

Свързани

Нашият най-добър ресурс за всичко CSS мрежа е нашето Пълно ръководство за CSS мрежа.

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.