Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
background: gray;
width: 300px;
align-items: start;
justify-items: center;
}
.flex {
display: flex;
align-items: center;
flex-direction: column;
}
.two-span-item {
background-color: lightpink;
}
.fifty-width {
width: 50px;
background-color: lightblue;
}
</style>
<body>
<p>Test that using justify-items centers each item to the grid-axis track it is on.</p>
<div class="grid">
<div class="flex">
<div class="fifty-width">
This is some text
</div>
<div class="two-span-item">
This is text
</div>
<div class="two-span-item">
This is text
</div>
</div>
<div class="fifty-width">
Some larger words in this sentence
</div>
<div class="fifty-width">
The cat cannot be taken from milk
</div>
</div>
</body>
</html>