Раскладка CSS Grid. Родительский элемент. Часть 2
В статье Раскладка CSS Grid. Родительский элемент. Часть 1 показаны основные свойства родительского элемента. В этой статье будут показаны свойства css grid, которые помогут выполнить выравнивание элементов сетки.
justify-items
Выравнивает содержимое относительно вертикальной оси. Применяется ко всем элементам сетки.
Можно использовать следующие значения:
justify-items : start | end | center | stretch;
По умолчанию используется stretch;
Рассмотрим примеры свойств css grid:
start выравнивает содержимое по левой стороне трека:
| justify - items: start |
Вид:
Свойство justify-items
.examplegrid {display : grid;}
justify-items: start;
Код:
<meta charset="utf-8">
<style>
.examplegrid {
border: dotted 1px red;
font-size: 10px;
}.examplegrid {
display : grid;display: -ms-grid;
grid-template-columns: 30% 30% 30%;
grid-template-rows: 10em 5em 10em;
justify-items: start;
}
.examplegrid div {
border: dotted 2px green;
}
</style><h4>Свойство justify-items</h4>
<div class="examplegrid">
<div>
<strong>1</strong>
</div><div>
<strong><code>.examplegrid {display : grid;}</code></strong>
</div><div>
<strong>3</strong>
</div><div>4</div>
<div><code>justify-items: start;</code></div>
<div>6</div><div>7</div>
<div>8</div>
<div>9</div></div>
<br>
end выравнивает содержимое по правой стороне трека:
| justify - items: end |
Вид:
.examplegrid2 {display : grid;}
justify-items: end;
Код:
<meta charset="utf-8">
<style>
.examplegrid2 {
border: dotted 1px red;
font-size: 10px;
}
.examplegrid2 {
display : grid;display: -ms-grid;
grid-template-columns: 1fr 2fr 3fr;
grid-template-rows: 10em 5em 10em;
justify-items: end;
}
.examplegrid2 div {
border: dotted 2px green;
}
</style>
<div class="examplegrid2">
<div>
<strong>1</strong>
</div><div>
<strong> <code>.examplegrid2 {display : grid;} </code></strong>
</div><div>3</div>
<div>4</div>
<div><code>justify-items: end;</code></div>
<div>6</div><div>7</div>
<div>8</div>
<div>9</div></div>
<br>
center выравнивает содержимое по центру трека:
| justify - items : center |
Вид:
.examplegrid1 {display : grid;}
justify-items: center;
Код:
<meta charset="utf-8">
<style>
.examplegrid1 {
border: dotted 1px red;
font-size: 10px;
}
.examplegrid1 {
display : grid;display: -ms-grid;
grid-template-columns: repeat(2,40%) auto;
grid-template-rows: 10em 5em 10em;
justify-items: center;
}
.examplegrid1 div {
border: dotted 2px green;
}
</style>
<div class="examplegrid1">
<div>
<strong>1</strong>
</div><div>
<strong> <code>.examplegrid1 {display : grid;} </code></strong>
</div><div>3</div>
<div>4</div>
<div><code>justify-items: center;</code></div>
<div>6</div><div>7</div>
<div>8</div>
<div>9</div></div>
<br>
stretch заполняет всю ширину трека:
| justify - items: stretch |
Вид:
.examplegrid3 {display : grid;}
justify-items: stretch;
grid-gap
Код:
<meta charset="utf-8">
<style>
.examplegrid3 {
border: dotted 1px red;
font-size: 10px;
}
.examplegrid3 {
display : grid;display: -ms-grid;
grid-template-columns: 2fr 250px 1fr;
grid-template-rows: 10em 5em 10em;
grid-gap: 10px;
justify-items: stretch;
}.examplegrid3 div {
border: dotted 2px green;
}
</style><div class="examplegrid3">
<div>
<strong>1</strong>
</div><div>
<strong> <code>.examplegrid3 {display : grid;} </code></strong>
</div><div>3</div>
<div>4</div>
<div><code>justify-items: stretch;</code></div>
<div>6</div><div>7</div>
<div><code>grid-gap</code></div>
<div>9</div></div>
align - items
Выравнивает содержимое относительно горизонтальной оси. Применяется ко всем элементам сетки.
Можно использовать следующие значения:
align - items : start | end | center | stretch;
По умолчанию используется stretch;
start выравнивает содержимое по верхней части ячейки:
| align - items : start |
Вид:
Свойство align-items
.examplegrid4 {display : grid;}
justify-items: start;
align-items: start;
Код:
<meta charset="utf-8">
<style>
.examplegrid4 {border: dotted 1px red;
font-size: 10px;
}
.examplegrid4 {
display : grid;display: -ms-grid;
grid-template-columns: 30% 30% 30%;
grid-template-rows: 10em 5em 10em;
justify-items: start;
align-items: start;
}
</style><h4>Свойство align-items</h4>
<div class="examplegrid4">
<div>
<strong>1</strong>
</div><div>
<strong><code>.examplegrid4 {display : grid;}</code></strong>
</div><div>
<strong>3</strong>
</div><div>4</div>
<div><code>justify-items: start;</code><br><code>align-items: start;</code></div><div>6</div><div>7</div>
<div>8</div><div>9</div></div>
<br>
end выравнивает содержимое по нижней части ячейки:
| align - items : end |
Вид:
.examplegrid5 {display : grid;}
justify-items: center;
align-items: end;
Код:
<meta charset="utf-8">
<style>
.examplegrid5 {
border: dotted 1px red;
font-size: 10px;
}
.examplegrid5 {
display : grid;display: -ms-grid;
grid-template-columns: repeat(2,40%) auto;
grid-template-rows: 10em 5em 10em;
justify-items: center;
align-items: end;
}
.examplegrid5 div {
border: dotted 2px green;
}
</style><div class="examplegrid5">
<div>
<strong>1</strong>
</div><div>
<strong> <code>.examplegrid5 {display : grid;} </code></strong>
</div><div>
3
</div><div>4</div>
<div><code>justify-items: center;</code><br><code>align-items: end;</code></div><div>6</div><div>7</div>
<div>8</div><div>9</div></div>
<br>
center выравнивает содержимое по центру трека:
| align - items: center |
Вид:
.examplegrid6 {display : grid;}
justify-items: end;
align-items: center;
Код:
<meta charset="utf-8">
<style>
.examplegrid6 {border: dotted 1px red;
font-size: 10px;
}
.examplegrid6 {
display : grid;display: -ms-grid;
grid-template-columns: 1fr 2fr 3fr;
grid-template-rows: 10em 5em 10em;
justify-items: end;
align-items: center;
}.examplegrid6 div {
border: dotted 2px green;
}
</style>
<div class="examplegrid6"><div>
<strong>1</strong>
</div><div>
<strong> <code>.examplegrid6 {display : grid;} </code></strong>
</div><div>
3
</div><div>4</div>
<div><code>justify-items: end;</code><br><code>align-items: center;</code></div><div>6</div><div>7</div>
<div>8</div><div>9</div></div>
<br>
stretch заполняет всю высоту ячейки:
| align - items : stretch |
Вид:
.examplegrid7 {display : grid;}
justify-items: stretch;
align-items: stretch;
grid-gap
Код:
<meta charset="utf-8">
<style>
.examplegrid7 {
border: dotted 1px red;
font-size: 10px;
}
.examplegrid7 {
display : grid;display: -ms-grid;
grid-template-columns: 2fr 250px 1fr;
grid-template-rows: 10em 5em 10em;
grid-gap: 10px;
justify-items: stretch;
align-items: stretch;
}.examplegrid7 div {
border: dotted 2px green;
}
</style><div class="examplegrid7">
<div>
<strong>1</strong>
</div><div>
<strong> <code>.examplegrid3 {display : grid;} </code></strong>
</div><div>
3
</div><div>4</div>
<div><code>justify-items: stretch;</code><br><code>align-items: stretch;</code></div><div>6</div><div>7</div>
<div><code>grid-gap</code></div><div>9</div></div>
В следующей статье рассмотрим какие свойства применять, когда сетка контейнера заведомо меньше страницы.
2019-03-04