Раскладка CSS Grid. Родительский элемент. Часть 3
В предыдущей статье Раскладка CSS Grid. Родительский элемент. Часть 2 показаны основные свойства родительского элемента раскладки, имеющие отношение к содержимому контейнера. В этой статье будут показаны свойства, которые помогут выровнять содержимое внутри контейнера когда сетка имеет фиксированный размер и заведомо меньше контейнера.
justify - content
Выравнивает сетку относительно вертикальной оси.
Может принимать следующие значения:
justify - content : start | end | center | stretch | space - around | space - between | space - evenly |;
start выравнивает сетку по левой стороне контейнера:
Вид:
.examplegrid {display : grid;}
justify-content: start;
Код:
<meta charset="utf-8">
<style>
.examplegrid {
border: dotted 1px red;
font-size: 10px;
text-align: center;
}.examplegrid {
display : grid;
display: -ms-grid;
grid-gap: 5px;
grid-template-columns: 90px 100px 90px;
grid-template-rows: 10em 5em 10em;
height: 30em;
}.examplegrid {
justify-content: start;
}.examplegrid div {
border: dotted 2px green;
}
.examplegrid span {
background-color: blue;
width: 100%;
}
</style><div class="examplegrid">
<span>
<strong>1</strong>
</span><div>
<strong>2</strong>
</div><div>
<code>.examplegrid {display : grid;}</code>
</div><div>4</div>
<div><code>justify-content: start;</code></div><div>6</div><div>7</div>
<div>8</div>
<div>9</div></div>
<br>
end выравнивает сетку по правой стороне контейнера:
Вид:
.examplegrid3 {display : grid;}
justify-content: end;
Код:
<meta charset="utf-8">
<style>
.examplegrid3 {
border: dotted 1px red;
font-size: 10px;
text-align: center;
}.examplegrid3 {
display : grid;
display: -ms-grid;
grid-gap: 5px;
grid-template-columns: 90px 100px 90px;
grid-template-rows: 10em 5em 10em;
height: 30em;
}.examplegrid3 {
justify-content: end;
}.examplegrid3 div {
border: dotted 2px green;
}.examplegrid3 span {
background-color: blue;
width: 100%;
}
</style><div class="examplegrid3">
<span>
<strong>1</strong>
</span><div>
<strong>2</strong>
</div><div>
<code>.examplegrid3 {display : grid;}</code>
</div><div>4</div>
<div><code>justify-content: end;</code></div><div>6</div><div>7</div>
<div>8</div><div>9</div></div>
<br>
center выравнивает сетку по центру контейнера:
Вид:
.examplegrid1 {display : grid;}
justify-content: center;
Код:
<meta charset="utf-8">
<style>
.examplegrid1 {
border: dotted 1px red;
font-size: 10px;
text-align: center;
}.examplegrid1 {
display : grid;
display: -ms-grid;
grid-gap: 5px;
grid-template-columns: 90px 100px 90px;
grid-template-rows: 10em 5em 10em;
height: 30em;
}.examplegrid1 {
justify-content: center;
}.examplegrid1 div {
border: dotted 2px green;
}.examplegrid1 span {
background-color: blue;
width: 100%;
}
</style>
<div class="examplegrid1"><span>
<strong>1</strong>
</span><div>
<strong> <code>.examplegrid1 {display : grid;} </code></strong>
</div><div>3</div>
<div>4</div>
<div>repeat</div>
<div>6</div><div>7</div>
<div><code>justify-content: center;</code></div>
<div>9</div></div>
<br>
stretch сетка заполняет всю ширину контейнера
Вид:
.examplegrid2 {display : grid;}
justify-content: stretch;
Код:
<meta charset="utf-8">
<style>
.examplegrid2 {
border: dotted 1px red;
font-size: 10px;
text-align: center;
}.examplegrid2 {
display : grid;
display: -ms-grid;
grid-gap: 5px;
grid-template-columns: 90px 100px 90px;
grid-template-rows: 10em 5em 10em;
height: 30em;
}.examplegrid2 {
justify-content: stretch;
}.examplegrid2 div {
border: dotted 2px green;
}.examplegrid2 span {
background-color: blue;
width: 100%;
}
</style><div class="examplegrid2">
<span>
<strong>1</strong>
</span><div>
<strong>2</strong>
</div><div>
<code>.examplegrid2 {display : grid;}</code>
</div><div>4</div>
<div><code>justify-content: stretch;</code></div>
<div>6</div><div>7</div>
<div>8</div>
<div>9</div></div>
<br>
space - around равные расстояния между элементами, отступы по краям равны половине расстояния между элементами
Ви
.examplegrid4 {display : grid;}
justify-content: space-around;
Вид:
Код:
<meta charset="utf-8">
<style>
.examplegrid4 {
border: dotted 1px red;
font-size: 10px;
text-align: center;
}.examplegrid4 {
display : grid;
display: -ms-grid;
grid-gap: 5px;
grid-template-columns: 90px 100px 90px;
grid-template-rows: 10em 5em 10em;
height: 30em;
}.examplegrid4 {
justify-content: space-around;
}.examplegrid4 div {
border: dotted 2px green;
}.examplegrid4 span {
background-color: blue;
width: 100%;
}
</style><div class="examplegrid4">
<span>
<strong>1</strong>
</span><div>
<strong>2</strong>
</div><div>
<code>.examplegrid4 {display : grid;}</code>
</div><div>4</div>
<div><code>justify-content: space-around;</code></div>
<div>6</div><div>7</div>
<div>8</div>
<div>9</div></div>
<br>
space - between равные расстояния между элементами, отступы по краям отсутствуют
Вид:
.examplegrid5 {display : grid;}
justify-content: space-between;
Код:
<meta charset="utf-8">
<style>
.examplegrid5 {
border: dotted 1px red;
font-size: 10px;
text-align: center;
}.examplegrid5 {
display : grid;
display: -ms-grid;
grid-gap: 5px;
grid-template-columns: 90px 100px 90px;
grid-template-rows: 10em 5em 10em;
height: 30em;
}.examplegrid5 {
justify-content: space-between;
}.examplegrid5 div {
border: dotted 2px green;
}.examplegrid5 span {
background-color: blue;
width: 100%;
}
</style><div class="examplegrid5">
<span>
<strong>1</strong>
</span><div>
<strong> <code>.examplegrid5 {display : grid;} </code></strong>
</div><div>
3
</div><div>4</div>
<div>repeat</div><div>6</div><div>7</div>
<div><code>justify-content: space-between;</code></div>
<div>9</div></div>
<br>
space - evenly равные расстояния между элементами, отступы по краям равны расстоянию между элементами
Вид:
.examplegrid6 {display : grid;}
justify-content: space-evenly;
Код:
<meta charset="utf-8">
<style>
.examplegrid6 {
border: dotted 1px red;
font-size: 10px;
text-align: center;
}.examplegrid6 {
display : grid;
display: -ms-grid;
grid-gap: 5px;
grid-template-columns: 90px 100px 90px;
grid-template-rows: 10em 5em 10em;
height: 30em;
}.examplegrid6 {
justify-content: space-evenly;
}.examplegrid6 div {
border: dotted 2px green;
}.examplegrid6 span {
background-color: blue;
width: 100%;
}
</style><div class="examplegrid6">
<span>
<strong>1</strong>
</span><div>
<strong> <code>.examplegrid6 {display : grid;} </code></strong>
</div><div>3</div>
<div>4</div>
<div>fr</div>
<div>6</div><div>7</div>
<div><code>justify-content: space-evenly;</code></div>
<div>9</div></div>
<br>
align - content
Выравнивает сетку относительно горизонтальной оси.
Принимает следующие значения:
align - content : start | end | center | stretch | space - around | space - beetwin | space - evenly |;
start выравнивает сетку по верхней стороне контейнера:
Вид:
.examplegrid8 {display : grid;}
justify-content: start;
align-content: start;
Код:
<meta charset="utf-8">
<style>
.examplegrid8 {
border: dotted 1px red;
font-size: 10px;
text-align: center;
}.examplegrid8 {
display : grid;
display: -ms-grid;
grid-gap: 5px;
grid-template-columns: 90px 100px 90px;
grid-template-rows: 10em 5em 10em;
height: 30em;}
.examplegrid8 {
justify-content: start;
align-content: start;
}.examplegrid8 div {
border: dotted 2px green;
}.examplegrid8 span {
background-color: blue;
width: 100%;
}
</style><div class="examplegrid8">
<span>
<strong>1</strong>
</span><div>
<strong> <code>.examplegrid8 {display : grid;} </code></strong>
</div><div>3</div>
<div>4</div>
<div>fr + px</div>
<div>6</div><div>7</div>
<div><code>justify-content: start;</code><br><code>align-content: start;</code></div>
<div>9</div></div>
<br>
end выравнивает сетку по нижней стороне контейнера:
Вид:
.examplegrid7 {display : grid;}
justify-content: end;
align-content: end;
Код:
<meta charset="utf-8">
<style>
.examplegrid7 {
border: dotted 1px red;
font-size: 10px;
text-align: center;
}.examplegrid7 {
display : grid;
display: -ms-grid;
grid-gap: 5px;
grid-template-columns: 90px 100px 90px;
grid-template-rows: 10em 5em 10em;
height: 30em;
}.examplegrid7 {
justify-content: end;
align-content: end;
}.examplegrid7 div {
border: dotted 2px green;
}.examplegrid7 span {
background-color: blue;
width: 100%;
}
</style><div class="examplegrid7">
<span>
<strong>1</strong>
</span><div>
<strong> <code>.examplegrid7 {display : grid;} </code></strong>
</div><div>3</div>
<div>4</div>
<div>fr + px</div>
<div>6</div><div>7</div>
<div><code>justify-content: end;</code><br><code>align-content: end;</code></div>
<div>9</div></div>
<br>
center выравнивает сетку по центру контейнера:
Вид:
.examplegrid9 {display : grid;}
justify-content: start;
align-content: center;
Код:
<meta charset="utf-8">
<style>
.examplegrid9 {
border: dotted 1px red;
font-size: 10px;
text-align: center;
}.examplegrid9 {
display : grid;
display: -ms-grid;
grid-gap: 5px;
grid-template-columns: 90px 100px 90px;
grid-template-rows: 10em 5em 10em;
height: 30em;
}.examplegrid9 {
justify-content: start;
align-content: center;
}.examplegrid9 div {
border: dotted 2px green;
}
.examplegrid9 span {
background-color: blue;
width: 100%;
}
</style><div class="examplegrid9">
<span>
<strong>1</strong>
</span><div>
<strong> <code>.examplegrid9 {display : grid;} </code></strong>
</div><div>3</div>
<div>4</div>
<div>fr + px</div>
<div>6</div><div>7</div>
<div><code>justify-content: start;</code><br><code>align-content: center;</code></div>
<div>9</div></div>
<br>
space - between равные расстояния по вертикали между элементами, отступы по краям отсутствуют
Вид:
.examplegrid10 {display : grid;}
justify-content: start;
align-content: space-between;
Код:
<meta charset="utf-8">
<style>
.examplegrid10 {
border: dotted 1px red;
font-size: 10px;
text-align: center;
}.examplegrid10 {
display : grid;
display: -ms-grid;
grid-gap: 5px;
grid-template-columns: 90px 100px 90px;
grid-template-rows: 10em 5em 10em;
height: 30em;
}.examplegrid10 {
justify-content: start;
align-content: space-between;
}
.examplegrid10 div {
border: dotted 2px green;
}.examplegrid10 span {
background-color: blue;
width: 100%;
}
</style><div class="examplegrid10">
<span>
<strong>1</strong>
</span><div>
<strong> <code>.examplegrid10 {display : grid;} </code></strong>
</div><div>3</div>
<div>4</div>
<div>fr + px</div>
<div>6</div><div>7</div>
<div><code>justify-content: start;</code><br><code>align-content: space-between;</code></div>
<div>9</div></div>
space - around равные расстояния по вертикали между элементами, отступы по краям равны половине расстояния между элементами;
space - evenly равные расстояния по вертикали между элементами, отступы по краям равны расстоянию между элементами.
В этой статье показано применение свойств раскладки grid: justify - content и
align - content.
2019-03-04