Подравняване по двете оси вътре в клетките на CSS грид
Може едновременно да се зададе
подравняване на елементите вътре в клетките на грида
както по хоризонталната, така и по вертикалната ос.
За тази цел можем да комбинираме двете
свойства justify-items
и align-items, които
се задават в родителския елемент.
В центъра на осите
Нека подравним нашите елементи в центъра на хоризонталната и вертикалната ос:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-items: center;
align-items: center;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Сега нека разгледаме нашия грид в дебъгъра:
В началото на хоризонталната и края на вертикалната
Нека позиционираме нашите елементи в клетките в началото на хоризонталната и в края на вертикалната ос:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-items: start;
align-items: end;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Сега нека разгледаме нашия грид в дебъгъра:
В края на хоризонталната и началото на вертикалната
Нека позиционираме нашите елементи в клетките в края на хоризонталната и в началото на вертикалната ос:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-items: end;
align-items: start;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Сега нека разгледаме нашия грид в дебъгъра:
Практически задачи
Създайте грид, състоящ се от пет елемента, разположени в три реда. Изпълнете подравняване на елементите в клетките в началото на хоризонталната и центъра на вертикалната ос.
Сега позиционирайте елементите на грида в два реда и задайте подравняване на елементите вътре в клетките в центъра на хоризонталната и началото на вертикалната ос.
Променете предната задача, така че подравняването на елементите да се извършва в края на хоризонталната и центъра на вертикалната ос.
