Що робить властивість grid-template-columns?
grid-template-columns задає структуру колонок у CSS Grid, визначаючи скільки їх буде і якого розміру кожна.
Приклади:
css
.container {
display: grid;
grid-template-columns: 200px 1fr 1fr;
}Це створює сітку з трьох колонок: перша фіксована (200px), дві інші гнучкі, по одній частці (fr) кожна.
Допустимі значення колонок:
px,em,rem: фіксовані одиниці%: відносні розміриfr: частки вільного просторуauto: розмір за вмістомmin-content,max-content,minmax(): автообчисленняrepeat(): повторювані колонки, наприклад:
css
grid-template-columns: repeat(3, 1fr); /* три однакові колонки */Підсумок: властивість керує кількістю і шириною колонок у grid-контейнері.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.