I'm trying to create a 2 x 2 image tile using css grid. I'm want to make this dynamic so that no matter how many images are provided (between 1 and 4), the full space of the tile is used. So like this:
Ive got this kinda working with the following css and markup.
CSS
.container {
display: flex;
}
.container .grid-tiles {
margin-right: 20px;
}
.grid-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, 38px);
grid-column-gap: 4px;
grid-row-gap: 4px;
width: 80px;
height: 80px;
}
.grid-tiles .grid-tile {
border-radius: 3px;
background-color: red;
}
/* Only one */
.grid-tile:only-child {
grid-area: 2 span / 2 span;
}
/* Three */
.grid-tile:first-child:nth-last-child(3) {
grid-area: 2 span;
}
HTML
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
</div>
But in some cases there needs to be text in a tile. When that happens the grid doesn't follow the sizing of the other instances:
I need the grid to be consistent. Anyone able to offer some help on how to ensure this / improvements to the grid properties? Thanks!
I've a Codepen of the current working.
To center an image with CSS Grid, wrap the image in a container div element and give it a display of grid . Then set the place-items property to center. P.S.: place-items with a value of center centers anything horizontally and vertically.
Level 3 of the CSS Grid Layout specification includes a masonry value for grid-template-columns and grid-template-rows . This guide details what masonry layout is, and how to use it. Warning: This feature is only implemented in Firefox, and can be enabled by setting the flag layout. css.
Force all the columns/rows to be equal in size by using
grid-template-columns: 1fr 1fr; /* two equal columns */
grid-auto-rows: 1fr; /* all the rows equal */
Full code
.container {
display: flex;
}
.container .grid-tiles {
margin-right: 20px;
}
.grid-tiles {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
gap: 4px;
width: 80px;
height: 80px;
}
.grid-tiles .grid-tile {
border-radius: 3px;
background-color: red;
}
/* Only one */
.grid-tile:only-child {
grid-area: span 2 / span 2;
}
/* Three */
.grid-tile:first-child:nth-last-child(3) {
grid-area: span 2;
}
<div class="container">
<div class="grid-tiles">
<div class="grid-tile"></div>
</div>
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
</div>
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
</div>
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
</div>
<div class="grid-tiles">
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile"></div>
<div class="grid-tile">Zaa</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With