<div class="grid-container">
<div class="grid-item grid-item-1"></div>
<div class="grid-item grid-item-2"></div>
<div class="grid-item grid-item-3"></div>
<div class="grid-item grid-item-4"></div>
</div>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.grid-item {
background-color: #0096ff;
border: solid 2px blue;
padding: 10em;
}
/**
* Example showing how autoplacement works, two columns are
* created and all content flows to fill one item per column
* and create as many rows as needed.
**/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.