CSS grid square layout

Question

I am trying to create grid/layout consists of squares. Four squares in each row. Squares can't distort on screen resize. Width and height must be the same all the time (I don't want fixed values). I must use CSS grid. Can anyone help me ?

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

if you want the square only, simply add `padding-bottom: 100%;` to the div, in case there is no content — Temani Afif, Feb 28 '19 at 14:12

Fabrizio Calderan · Answer 1 · 2021-03-26T23:15:14.593

89

With CSS only you could use a pseudoelement to keep always the aspect ratio to 1:1 or use the new aspect-ratio property , e.g.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
  aspect-ratio: 1;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

edited Mar 26 '21 at 23:15

answered Feb 28 '19 at 13:49

Fabrizio Calderan

120,726
26
164
177

2

any particular reason for inline-block and not block? – Temani Afif Feb 28 '19 at 14:00
2

And for curiousity, what is the use of vertical-align in this case? – guitarzero Feb 28 '19 at 14:05
2

@guitarzero to avoid the 4pixel gap on the bottom when the line-height is by default set to baseline – Fabrizio Calderan Feb 28 '19 at 14:10
@TemaniAfif you could also use display block. But in case you need to put some data inside the element it's better using inline-block, so the data won't shift below the pseudoelement – Fabrizio Calderan Feb 28 '19 at 14:12
1

Why not just setting `padding-bottom: 100%` and `height: 0` for `.container div` without any pseudoelement? – Vadim Ovchinnikov Apr 16 '19 at 13:22
Note: If you plan to use the divs as grids (as well) you'll need to add grid-row: 1; grid-column: 1; in the ::before, otherwise you'll get an extra row for each one. – Carlos López Marí Jan 08 '21 at 23:52
`aspect-ratio` made short work of my similar problem, thanks! – Stabledog Oct 20 '21 at 21:28

score 8 · Answer 2 · edited Jun 20 '20 at 09:12

For the fun, curiosity of grid behavior and to avoid a pseudo element,

You may also set an height equal to the width of your grid container, the grid system will automaticly stretch the rows.

A good reminder to mind :

https://css-tricks.com/snippets/css/complete-guide-grid/

and examples https://gridbyexample.com/

working example if your grid uses entire browser's width

  * {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  height: calc(50vw - 5px);  /*instead playing around with grid gap gap */
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.container div {
  /* bg to show i'm squarred or not ? */
  background-image: linear-gradient( 45deg, transparent 50%, rgba(0, 0, 0, 0.5) 50%);
 
 margin: 0 5px 5px 0;  /*instead playing around with grid gap gap */
  background-color: red;
}


/* extra for demo, not needed */

.container {
  counter-reset: test;
}

.container div {
  display: flex;  /* or grid */
}

.container div:before {
  counter-increment: test;
  content: 'Div N°:'counter(test)' -';
  margin: auto;/* center me */
  color: yellow;

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

A codepen to fork or play with

worth to note that your height trick will work if we consider 2 rows, it should be adjusted depending on the number of rows — Temani Afif, Feb 28 '19 at 14:58
@TemaniAfif , then height is to set on children . note, 50vw (2rows on parent) turns down to 25vw for the children ;) — G-Cyrillus, Feb 28 '19 at 15:02
a little issue, is that vw include the scrollbar, so you won't have perfect square when there is a scroll — Temani Afif, Feb 28 '19 at 15:27
Also if you don't know the width of the container this won't work. — Carlos López Marí, Jan 08 '21 at 23:51

Temani Afif · Answer 3 · 2020-05-26T08:47:36.313

Another trick where you can put any content inside without breaking the ratio. The idea is to have the grid inside a big square that you divide into small squares:

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  grid-template-rows: repeat(4,minmax(0,1fr));
  grid-gap: 5px;
}

.container div {
  background-color: red;
}

body:before {
  content: "";
  display: block;
  padding-top: 100%;
}

body {
  position: relative;
  margin: 0;
}

img {
  max-width: 100%;
  max-height: 100%;
}

<div class="container">
  <div>any contet here</div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/300?image=1069"></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
  <div>any contet here any contet here</div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
  <div></div>
</div>

You can control the limit of rows. In the above I made them 4, we can have only 2 by making the padding 50% instead of 100%. We will have a big rectangle inside where will have 8 squares (4 in each row).

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  grid-template-rows: repeat(2,minmax(0,1fr));
  grid-gap: 5px;
}

.container div {
  background-color: red;
}

body:before {
  content: "";
  display:inline-block;
  padding-top: 50%;
}

body {
  position:relative;
  margin: 0;
}

img {
  max-width: 100%;
  max-height: 100%;
}

<div class="container">
  <div>any contet here</div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/300?image=1069"></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
</div>

You can control the number of rows or columns using CSS variables and have something more generic:

:root {
  --n:6;
  --m:6;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(var(--m),minmax(0,1fr));
  grid-template-rows: repeat(var(--n),minmax(0,1fr));
  grid-gap: 5px;
}

.container div {
  background-color: red;
}

body:before {
  content: "";
  display:inline-block;
  padding-top: calc(var(--n)/var(--m) * 100%);
}

body {
  position:relative;
}

img {
  max-width: 100%;
  max-height: 100%;
}

<div class="container">
  <div>any contet here</div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/300?image=1069"></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
  <div>any contet here</div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/300?image=1069"></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/300?image=1069"></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
</div>

Can you explain this code? `body:before { content: ""; padding-top: calc(var(--n)/var(--m) * 100%); }` — Fred Hors, Mar 05 '19 at 22:22
@FredHors it allow to keep the ratio of the whole grid ... if we have the same number of rows and columns we should have a square thus it will be 100% in the padding because padding consider the width as reference and it will increase the height so height=width ... if we have n rows and m columns the ratio is n/m (no more square) so the height should (n/m)*width that's why the padding need to be n/m*100% — Temani Afif, Mar 05 '19 at 22:26

guitarzero · Answer 4 · 2019-04-18T09:03:55.820

** @fcalderan's answer solves the issue and all credit reserved. **

This obviously breaks the square shape, but if you would be using any text a small adjustment will work in your favor. You could rather use the ::after pseudo element to not push down or split potential content. Changing to display: block also removes the necessity of vertical-aling: top as far as I know.

To further preserve the aspect ratio when using text, I'd make the text position: absolute.

See the snippet below when using ::before vs. ::after to illustrate my point.

.container,
.container2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

.container div::before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}

.container2 div::after {
  content: "";
  padding-bottom: 100%;
  display: block;
}

.container2 .text {
  position: absolute;  
}

.container2 div {
  background-color: green;
  position: relative;
  overflow: hidden;
}

<div class="container">
  <div>
    <div class="text">Here is some text.</div>
  </div>
  <div>
    <div class="text">Here is some more text.</div>
  </div>
  <div>
    <div class="text">Here is some longer text that will break how this looks.</div>
  </div>
</div>
  
  <hr>
  <div class="container2">
  <div>
    <div class="text">Here is some text.</div>
  </div>
  <div>
    <div class="text">Here is some more text.</div>
  </div>
  <div>
    <div class="text">Here is some longer text that will break how this looks.</div>
  </div>
</div>

we no more have square in both cases – Temani Afif Feb 28 '19 at 14:54 — Temani Afif, Feb 28 '19 at 14:54
You are indeed right @TemaniAfif and just made an edit. – guitarzero Feb 28 '19 at 14:58 — guitarzero, Feb 28 '19 at 14:58

CSS grid square layout

4 Answers4

Linked

Related