CSS grid-template-columns — колонки ґріда
Властивісь grid-template-columns визначає стовпці сітки зі списком значень, розділених пробілами. Значення відображають розмір стовпчика.
Приклад використання:
grid-template-columns: 75px 1fr 50vw;
У цьому прикладі (результат вище) ми подаємо три значення для властивості grid-template-columns. Ці три значення вказують функцію визначення розміру доріжки, яка буде використовуватися для кожного з трьох стовпців. Якщо ми збільшимо, скажімо, перше значення, перший стовпець стане ширшим.
Одиниці vh та vw є одиницями довжини, які представляють 1% висоти вікна перегляду (для vh) або ширини (для vw). fr представляє частку вільного простору в контейнері сітки.
Іменовані рядки
Наприклад:
grid-template-columns: [col1-start] 50vw [col2-start] 1fr [col3-start] 10vw;
Іменовані лінії можуть спростити усвідомлення сітки, оскільки ви можете надати змістовні імена рядкам.
Названі рядки можуть бути явними або неявними:
- Явні іменовані рядки - це ті назви, які ви задаєте.
- Неявні названі рядки - це імена, які автоматично створюються властивості
grid-template-areas. Ці названі рядки створюються з названих областей у шаблоні. Для кожної названої сіткової області з ім'ямfoo(наприклад) створюються чотири неявно названих рядки. Дві імені, що називаютьсяfoo-start, є початковими рядками і стовпчиками в сітці та два іменіfoo-end- кінцевими.
Загальний опис
автор: NagarD
Синтаксис
grid-template-columns: none | <track-list> | <auto-track-list>Властивість grid-template-columns може отримувати 2 значень:
-
<track-size> -
може бути довжиною, відсотком або часткою вільного місця в сітці (за допомогою
автор: Svitlanafr) -
<line-name> -
назва іменованого рядку
автор: Svitlana
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.gridTemplateColumns |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 57 | 52 | 10.1 | 44 | 16 | 10* | |
| Базова підтримка | 57.0 | 52.0 | 10.1 | 44.0 | 16.0 | Не підтримується |
| minmax() | 57.0 | 52.0 | 44.0 | 10.1 | 12.0 | - |
| repeat() | 57.0 | 57.0 | 44.0 | 10.1 | 16.0 | Не підтримується |
| fit-content() | 29.0 | 51.0 | 10.1 | 44.0 | 16.0 | Не підтримується |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 57 | 57 | 52 | 10.3 | |
| Базова підтримка | 57.0 | 52.0 | 10.3 | |
| minmax() | Не підтримується | 52.0 | 10.3 | |
| repeat() | - | 57.0 | 10.3 | |
| fit-content() | 57.0 | 51.0 | 10.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Інструмент
Складає сітку й віддає готовий grid-template.
Генератор CSS Grid — окремою сторінкою, з поясненням пасток.
Приклад використання
HTML
<div class="box">
<div class="item">75px</div>
<div class="item">1fr</div>
<div class="item">50vw</div>
<div class="item">75px</div>
<div class="item">1fr</div>
<div class="item">50vw</div>
<div class="item">75px</div>
<div class="item">1fr</div>
<div class="item">50vw</div>
</div>CSS
.box {
display: grid;
grid-template-columns: 75px 1fr 50vw;
grid-gap: 16px;
}
.item {
background-color: tomato;
color: white;
font-size: 1.75em;
text-align: center;
font-family: monospace;
padding: 16px 0;
}Три колонки трьома різними одиницями: чверть ширини контейнера, рівно 100px і auto — все, що лишилося.
HTML
<div class="box">
<div>25%</div>
<div>100px</div>
<div>auto</div>
</div>CSS
.box {
display: grid;
grid-template-columns: 25% 100px auto;
gap: 4px;
}
.box div {
background: #0172ad;
color: #fff;
padding: 8px;
}Одна й та сама сітка у відсотках і у fr. У відсотковій третя колонка вилазить за контейнер, бо gap додається зверху; fr рахує простір, що лишився.
HTML
<p>33.33% + gap — вилазить за рамку</p>
<div class="wrap"><div class="grid percent"><i>1</i><i>2</i><i>3</i></div></div>
<p>1fr + gap — вміщається</p>
<div class="wrap"><div class="grid fr"><i>1</i><i>2</i><i>3</i></div></div>CSS
.wrap {
border: 2px solid #c0392b;
margin-bottom: 1.5rem;
}
.grid {
display: grid;
gap: 20px;
}
.percent { grid-template-columns: 33.33% 33.33% 33.33%; }
.fr { grid-template-columns: 1fr 1fr 1fr; }
.grid i {
padding: 1rem;
font-style: normal;
text-align: center;
background: #34495e;
color: #fff;
}Динамічний приклад
HTML
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>grid-template-columns</strong>:</p>
<p>Властивість grid-template-columns встановлює значення ширини для колонків (розділяючи їх пробілом). У цьому прикладі Ви мусите прописувати не тільки цифру, а й одиниці довжини (наприклад fr).</p>
<input type="text" class="input" id="one" value="1fr">
<input type="text" id="two" class="input" value="1fr">
<input type="text" id="three" class="input" value="1fr">
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>CSS
body {
font-family: monospace;
font-size: 16px;
line-height: 1.45;
}
.input {
margin-bottom: 36px;
font-size: 14px;
width: 75px;
}
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 5px;
}
.box .item {
background-color: tomato;
color: white;
font-size: 1.4em;
font-family: monospace;
padding: 16px;
text-align: center;
}JS
document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
document.querySelectorAll('.box').forEach((n) => n.style.setProperty('grid-template-columns', document.querySelector('#one').value + ' ' + document.querySelector('#two').value + ' ' + document.querySelector('#three').value));
}));Коментарі
Коментарів ще немає — будьте першим!