Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Image Tile Using CSS Grid

Tags:

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:

image tile

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:

nope

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.

like image 557
jigglyT101 Avatar asked Jun 28 '18 08:06

jigglyT101


People also ask

How do I center an image in a grid in CSS?

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.

Can CSS Grid do masonry?

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.


1 Answers

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>
like image 100
Temani Afif Avatar answered Oct 02 '22 11:10

Temani Afif