Уласцівасць grid-template-columns
Уласцівасць grid-template-columns задае
колькасць і шырыню слупкоў, якія
будзе займаць элемент у грідзе або сетцы.
Уласцівасць паказваецца ў элеменце-бацьку
і вызначае шырыню слупкоў элементаў-патомкаў.
У значэнні ўласцівасці паказваем шырыню слупкоў
у любых адзінках вымярэння
для памераў.
Пасля пазначэння ва ўласцівасцях значэнняў у пікселях
памеры слупкоў будуць дакладна ім адпавядаць.
Калі мы задаем слова auto, то слупкі будуць
запаўняць усю даступную прастору. Выкарыстанне
адзінкі fr (фракцыя) азначае,
што ўся прастора будзе падзелена
на аднолькавыя долі. Перавагай
fr з'яўляецца яго адаптыўнасць да
розных кантэйнераў або дазволам экрана,
паколькі fr проста падзяляе іх на паказаную
колькасць фракцый без прывязкі да дакладнага памеру ў пікселях.
Сінтаксіс
селектар {
grid-template-columns: шырыня слупка;
}
Прыклад
Давайце задамо шырыню слупкоў для нашых элементаў у грідзе:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Давайце пакажам першаму і трэцяму слупкам фіксаваную шырыню ў пікселях, а другі слупок хай аўтаматычна запоўніць даступную прастору:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
А цяпер з дапамогай уласцівасці
grid-template-columns
зробім так, каб першы і другі
слупкі занялі адну частку кантэйнера,
а трэці слупок - тры часткі:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Значэнні, паказаныя ў адзінках fr
могуць прымаць дробны выгляд. Давайце
зменім папярэдні прыклад, паказаўшы
для другога і трэцяга слупка шырыню
ў дробных ліках:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Давайце ва ўласцівасці grid-template-columns
пакажам функцыю repeat(),
якая паведаміць кантэйнеру, што ўсе
тры слупкі павінны мець аднолькавую шырыню:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
А цяпер давайце зменім папярэдні прыклад так, каб да трох аднолькавых слупкоў дадаўся чацвёрты, які займе дзве фракцыі кантэйнера:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Давайце задамо першым двум слупкам шырыню ў адну фракцыю кантэйнера, а апошнім двум слупкам - у дзве фракцыі:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
А цяпер давайце ўсталюем шырыню слупкам
скамбінаваўшы значэнні, паказаныя з дапамогай
функцыі repeat() і свабодных адзінак fr:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Таксама ў функцыі repeat() можна паказваць
значэнне auto-fill, якое запоўніць
наш кантэйнер аднолькавымі слупкамі патрэбнай нам шырыні:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Вельмі зручна разам з auto-fill
паказваць функцыю minmax,
якая задае дыяпазон шырыні слупкоў
ад мінімальнага да максімальнага значэння.
Калі шырыня кантэйнера не змяшчае ўсе
слупкі, то іх некаторыя перамясцяцца
на новы радок, пры гэтым слупкі ў радку
раўнамерна размеркавацца ў ім. Давайце зменім
папярэдні прыклад, паказаўшы ў ім функцыю minmax.
Для таго, каб убачыць розныя варыянты размяшчэння слупкоў
змяняйце шырыню старонкі свайго браўзэра:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Цяпер давайце пакажам уласцівасць auto-fit,
адрозненне якога ад auto-fill заключаецца ў тым,
што яно падганяе колькасць слупкоў пад
даступную шырыню кантэйнера, пашыраючы або
сціскаючы іх:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Таксама побач з fr можна
выкарыстоўваць значэнні ў %, якія таксама вызначаюць
якую частку кантэйнера будзе займаць слупок.
Пры гэтым спачатку будзе вылічвацца памер
слупка ў %, а якая засталася свабодная прастора
падзеліцца на фракцыі:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Давайце выкарыстаем разам уласцівасці
grid-template-columns і
grid-template-rows:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
Давайце з дапамогай уласцівасцей
grid-template-columns і
grid-template-rows
стварым табліцу з дзевяці ячаек, размешчаных
у тры рады. Прычым другі і трэці рад будуць мець аднолькавую шырыню,
а кожны слупок - розную шырыню:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Прыклад
А цяпер у табліцы з папярэдняга прыкладу зробім верхні рад шырынёй у дзве фракцыі, а першы слупок - у палову фракцыі:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Глядзіце таксама
-
уласцівасць
grid-template-rows,
якое задае колькасць і шырыню радоў у грідзе -
уласцівасць
grid-auto-columns,
якое задае колькасць і шырыню слупкоў у няяўным грідзе
