Grid of responsive squares

Asked 8/12, 2013 at 17:44 Answered 31/1, 2021 at 8:56

Solved html css responsive-design grid-layout aspect-ratio

189

I'm wondering how I would go about creating a layout with responsive squares. Each square would have vertically and horizontally aligned content. The specific example is displayed below...

responsive squares with content

Soraya answered 8/12, 2013 at 17:44 Comment(1)

I hate how questions with great answers just get randomly closed by people with a really pedantic outlook on what stackoverflow should be like. If they have good, accepted, upvoted answers... why close it??? Where's the confusion to be had? Sure, on its own "grid of responsive squares" might need a little, or a lot, of explaining, but this is a 7 year old, 160+ question with a 400+ answer. I'm voting reopen. – Sequel 27/2, 2020 at 14:30

447

New solution (2022)

CSS has changed since this aswer was written. We now have several properties that can drasticaly simplify code for a square grid :

The grid property to handle the grid layout (MDN reference)
The aspect ratio property to handle the square aspect ratio of each grid item (MDN reference)
The object-fit property to handle image centering and wether they should cover the square or not (MDN reference)

Here is an example :

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2%;
}

.square {
  aspect-ratio: 1/ 1;
  display: flex;
  align-items: center;
  padding: 5%;
  background-color: #1E1E1E;
  color: #fff;
}

.square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.square.fullImg {
  padding: 0;
}

.square.fullImg img {
  object-fit: cover;
}

<div class="grid">
  <div class="square">
    <ul>This demo shows you can center multiple types of content :
      <li>Text</li>
      <li>Images</li>
      <li>Lists</li>
    </ul>
  </div>
  <div class="square">98%</div>
  <div class="square">3.9/5</div>
  <div class="square"><img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" /></div>
  <div class="square"><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" /></div>
  <div class="square"><img class="rs" src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" /></div>
  <div class="square fullImg"><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" /></div>
  <div class="square fullImg"><img class="rs" src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" /></div>
  <div class="square fullImg"><img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" /></div>
</div>

Previous answer

This still works but CSS has changed since it was written and ne properties can make the code simpler and easier to understand.

You can make responsive grid of squares with vertically and horizontally centered content only with CSS. I will explain how in a step by step process but first here are 2 demos of what you can achieve:

Now let's see how to make these fancy responsive squares!

1. Making the responsive squares :

The trick for keeping elements square (or whatever other aspect ratio) is to use percent padding-bottom.
Side note: you can use top padding too or top/bottom margin but the background of the element won't display.

As top padding is calculated according to the width of the parent element (See MDN for reference), the height of the element will change according to its width. You can now Keep its aspect ratio according to its width.
At this point you can code:

HTML :

<div></div>

CSS :

div {
    width: 30%;
    padding-bottom: 30%; /* = width for a square aspect ratio */
}

Here is a simple layout example of 3*3 squares grid using the code above.

With this technique, you can make any other aspect ratio, here is a table giving the values of bottom padding according to the aspect ratio and a 30% width.

 Aspect ratio  |  padding-bottom  |  for 30% width
------------------------------------------------
    1:1        |  = width         |    30%
    1:2        |  width x 2       |    60%
    2:1        |  width x 0.5     |    15%
    4:3        |  width x 0.75    |    22.5%
    16:9       |  width x 0.5625  |    16.875%

2. Adding content inside the squares :

As you can't add content directly inside the squares (it would expand their height and squares wouldn't be squares anymore) you need to create child elements (for this example I am using divs) inside them with position: absolute; and put the content inside them. This will take the content out of the flow and keep the size of the square.

Don't forget to add position:relative; on the parent divs so the absolute children are positioned/sized relatively to their parent.

Let's add some content to our 3x3 grid of squares :

HTML :

<div class="square">
    <div class="content">
        .. CONTENT HERE ..
    </div>
</div>
... and so on 9 times for 9 squares ...

CSS :

.square {
    float: left;
    position: relative;
    width: 30%;
    padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
    margin: 1.66%;
    overflow: hidden;
}

.content {
    position: absolute;
    height: 80%; /* = 100% - 2*10% padding */
    width: 90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}

RESULT <-- with some formatting to make it pretty!

3. Centering the content :

Horizontally :

This is pretty easy, you just need to add text-align:center to .content.
RESULT

Vertical alignment :

This becomes serious! The trick is to use

display: table;
/* and */
display: table-cell;
vertical-align: middle;

but we can't use display:table; on .square or .content divs because it conflicts with position:absolute; so we need to create two children inside .content divs. Our code will be updated as follow :

HTML :

<div class="square">
    <div class="content">
        <div class="table">
            <div class="table-cell">
                ... CONTENT HERE ...
            </div>
        </div>
    </div>
</div>
... and so on 9 times for 9 squares ...

CSS :

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
}

.content {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}

.table{
    display:table;
    height:100%;
    width:100%;
}

.table-cell{
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;
}

We have now finished and we can take a look at the result here :

LIVE FULLSCREEN RESULT

editable fiddle here

Ulrica answered 8/12, 2013 at 18:17 Comment(12)

"As top padding is calculated acccording to the width of the parent element" is this convention ? – Manganese 27/5, 2014 at 12:49

@Manganese yes. Percentage paddings and margins are calculated according to the width of the parent. Check here for padding developer.mozilla.org/en-US/docs/Web/CSS/padding – Ulrica 27/5, 2014 at 13:32

This is great. Just a heads-up for others: if you're using * { box-sizing: border-box; } you'll need to adjust the height and width in the .content div to 100%. :) – Dashboard 3/10, 2014 at 2:46

While it is possible with CSS, it has limits. many times there would be too many in a row, or too few, and creating media query for who-knows how many situations is not practical... – Orris 27/1, 2015 at 11:1

This is a great answer. If anyone's looking to do this with flexbox, here's how: https://mcmap.net/q/37042/-grid-of-responsive-squares/… – Bullion 22/1, 2016 at 16:8

what's the calculus behind the margin value? what if I want to set a grid 5x5? – Complicate 3/5, 2016 at 9:33

@Complicate the sum of all margins + all width on a row must be equal to 100%. So for a 5x5 grid, you could use 18% width with 1% margins on each sides of the elements. – Ulrica 3/5, 2016 at 9:41

Fantastic. Just a heads up: To center horizontally & vertically, just make the .content a flexbox with justify-content: center; align-items: center; flex-flow: column nowrap; – Kerato 16/8, 2017 at 7:13

I can't get responsive squares with just grid, so without all the other methods Can you make a simple example? – Holmann 28/3, 2023 at 21:53

@FrankConijn-SupportUkraine this is as simple as it gets with grid : jsfiddle.net/webtiki/gbdpx5n8 – Ulrica 29/3, 2023 at 8:20

That's grid plus aspect-ratio, the latter having poor browser support. I clearly wrote that I can't get responsive squares with just grid, without all the other methods. – Holmann 29/3, 2023 at 20:12

@FrankConijn-SupportUkraine I don' t really understand your comment but here is an example without grid or aspect-ratio : jsfiddle.net/ucxozgqj – Ulrica 4/4, 2023 at 10:14

You could use vw (view-width) units, which would make the squares responsive according to the width of the screen.

A quick mock-up of this would be:

html,
body {
  margin: 0;
  padding: 0;
}
div {
  height: 25vw;
  width: 25vw;
  background: tomato;
  display: inline-block;
  text-align: center;
  line-height: 25vw;
  font-size: 20vw;
  margin-right: -4px;
  position: relative;
}
/*demo only*/

div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  background: rgba(200, 200, 200, 0.6);
  transition: all 0.4s;
}
div:hover:before {
  background: rgba(200, 200, 200, 0);
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

Kassey answered 16/4, 2015 at 9:22 Comment(1)

Don't use margin-left: -4px; use margin-right:-4px. Rather don't mess with inconsistency in mincharspace but set to a wrapper parent font-size to 0 and than for the child elements reset to 1rem (relative-em) – Demography 10/10, 2015 at 12:15

The accepted answer is great, however this can be done with flexbox.

Here's a grid system written with BEM syntax that allows for 1-10 columns to be displayed per row.

If there the last row is incomplete (for example you choose to show 5 cells per row and there are 7 items), the trailing items will be centered horizontally. To control the horizontal alignment of the trailing items, simply change the justify-content property under the .square-grid class.

.square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px black;
  overflow: hidden;
  position: relative;
}

.square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

// Sizes – Number of cells per row

.square-grid__cell--10 {
  flex-basis: 10%;
}

.square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.square-grid__cell--8 {
  flex-basis: 12.5%;
}

.square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.square-grid__cell--5 {
  flex-basis: 20%;
}

.square-grid__cell--4 {
  flex-basis: 25%;
}

.square-grid__cell--3 {
  flex-basis: 33.333%;
}

.square-grid__cell--2 {
  flex-basis: 50%;
}

.square-grid__cell--1 {
  flex-basis: 100%;
}

.square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px black;
  overflow: hidden;
  position: relative;
}

.square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

// Sizes – Number of cells per row

.square-grid__cell--10 {
  flex-basis: 10%;
}

.square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.square-grid__cell--8 {
  flex-basis: 12.5%;
}

.square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.square-grid__cell--5 {
  flex-basis: 20%;
}

.square-grid__cell--4 {
  flex-basis: 25%;
}

.square-grid__cell--3 {
  flex-basis: 33.333%;
}

.square-grid__cell--2 {
  flex-basis: 50%;
}

.square-grid__cell--1 {
  flex-basis: 100%;
}

<div class='square-grid'>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
</div>

Fiddle: https://jsfiddle.net/patrickberkeley/noLm1r45/3/

This is tested in FF and Chrome.

Bullion answered 22/1, 2016 at 16:7 Comment(1)

Still, you're using padding-bottom to fix height, so it is actually, same answer as accepted. The only difference is how the grid made, not squared grid. – Jedlicka 4/2, 2017 at 6:14

Now we can easily do this using the aspect-ratio ^ref property

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columns */
  grid-gap: 10px;
}

.container>* {
  aspect-ratio: 1 / 1; /* a square ratio */
  border: 1px solid;
  
  /* center content */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

img {
  max-width: 100%;
  display: block;
}

<div class="container">
  <div> some content here </div>
  <div><img src="https://picsum.photos/id/25/400/400"></div>
  <div>
    <h1>a title</h1>
  </div>
  <div>more and more content <br>here</div>
  <div>
    <h2>another title</h2>
  </div>
  <div><img src="https://picsum.photos/id/104/400/400"></div>
</div>

Also like below where we can have a variable number of columns

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 10px;
}

.container>* {
  aspect-ratio: 1 / 1; /* a square ratio */
  border: 1px solid;
  
  /* center content */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

img {
  max-width: 100%;
  display: block;
}

<div class="container">
  <div> some content here </div>
  <div><img src="https://picsum.photos/id/25/400/400"></div>
  <div>
    <h1>a title</h1>
  </div>
  <div>more and more content <br>here</div>
  <div>
    <h2>another title</h2>
  </div>
  <div><img src="https://picsum.photos/id/104/400/400"></div>
  <div>more and more content <br>here</div>
  <div>
    <h2>another title</h2>
  </div>
  <div><img src="https://picsum.photos/id/104/400/400"></div>
</div>

Highbinder answered 31/1, 2021 at 8:56 Comment(0)

I use this solution for responsive boxes of different rations:

HTML:

<div class="box ratio1_1">
  <div class="box-content">
            ... CONTENT HERE ...
  </div>
</div>

CSS:

.box-content {
  width: 100%; height: 100%;
  top: 0;right: 0;bottom: 0;left: 0;
  position: absolute;
}
.box {
  position: relative;
  width: 100%;
}
.box::before {
    content: "";
    display: block;
    padding-top: 100%; /*square for no ratio*/
}
.ratio1_1::before { padding-top: 100%; }
.ratio1_2::before { padding-top: 200%; }
.ratio2_1::before { padding-top: 50%; }
.ratio4_3::before { padding-top: 75%; }
.ratio16_9::before { padding-top: 56.25%; }

See demo on JSfiddle.net

Trifling answered 9/4, 2016 at 12:56 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

New solution (2022)

Previous answer

1. Making the responsive squares :

2. Adding content inside the squares :

3. Centering the content :

LIVE FULLSCREEN RESULT

Recommended topics

Hot tags