In the following example we have a simple 2 x 2 grid layout. Initially the grid container has justify-items
and align-items
values of stretch
— the defaults — which causes the grid items to stretch across the entire width of their cells.
The second, third, and fourth grid items are then given different values of place-self
, to show how these override the default placements. These values cause the grid items to span only as wide/tall as their content width/height, and align in different positions across their cells, in the block and inline directions.
HTML
<article class="container">
<span>First</span>
<span>Second</span>
<span>Third</span>
<span>Fourth</span>
</article>
CSS
html {
font-family: helvetica, arial, sans-serif;
letter-spacing: 1px;
}
article {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 80px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
span:nth-child(2) {
place-self: start center;
}
span:nth-child(3) {
place-self: center start;
}
span:nth-child(4) {
place-self: end;
}
article span {
background-color: black;
color: white;
margin: 1px;
text-align: center;
}
article,
span {
padding: 10px;
border-radius: 7px;
}
Result