Cвойство grid представляет собой двумерную систему сеток в CSS. Гриды подойдут и для верстки основных областей страницы, и небольших элементов пользовательского интерфейса. Грид представляет собой пересекающийся набор горизонтальных и вертикальных линий, образующих колонки и строки. Элементы могут быть помещены в грид в пределах линий этих колонок и строк. Вы можете создать грид с фиксированными размерами полоc, например используя пиксели. Это установит грид на определенный пиксель, соответствующим желаемому макету. Вы также можете создать грид с гибкими размерами, используя проценты или новую единицу измерения — «fr», разработанную для этой цели.
grid հատկությունը CSS-ում 2D ցանցային համակարգ է: Ցանցերը հարմար են էջի հիմնական տարածքները և օգտագործողի ինտերֆեյսի փոքր տարրերը տեղադրելու համար: Ցանցը հորիզոնական և ուղղահայաց գծերի հատվող բազմություն է, որը կազմում է սյունակներ և տողեր: Նյութերը կարող են տեղադրվել grid-ի մեջ սյունակի և տողերի սահմաններում: Դուք կարող եք ցանց ստեղծել ֆիքսված գծերի չափերով, օրինակ՝ օգտագործելով պիքսելներ: Դա grid-ը կսահմանի ցանկալի դասավորությանը համապատասխանող պիքսելներին հավասար: Դուք կարող եք նաև ստեղծել փոփոխվող ցհապսերով grid՝ օգտագործելով տոկոսներ կամ չափման նոր միավոր՝ «fr»:
See the Pen grid by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.
⇓Результат данного примера показан на рисунке⇓
⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓
| Browser | IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
| Version | 10+ | 16+ | 57+ | 52+ | 10.1+ | 44+ |
| Notes | -ms- |