A grid layout with responsive squares

by

The padding-bottom trick is the most used to accomplish that.

You can combine it with both Flexbox and CSS Grid, and since using percent for margin/padding gives inconsistent result for flex/grid items (on older browser versions, see edit note below), one can add an extra wrapper, or like here, using a pseudo, so the element with percent is not the flex/grid item.

Edit: Note, there’s an update made to the specs., that now should give consistent result when used on flex/grid items. Be aware though, the issue still occurs on older versions.

Note, if you will add content to the content element, it need to be position absolute to keep the square’s aspect ratio.

Fiddle demo – Flexbox

Edit 2: In a comment I were asked how to have a centered text, so I added that in below snippet.

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;

  display: flex;               /* added for centered text */
  justify-content: center;     /* added for centered text */
  align-items: center;         /* added for centered text */
}
<div class="square-container">

  <div class="square">
    <div class="content">
      <span>Some centered text</span>
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

</div>

CSS Grid version

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

.square {
  position: relative;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}
<div class="square-container">

  <div class="square">
    <div class="content">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

</div>

More Related Contents:

  1. Make a div span two rows in a grid
  2. Aligning grid items across the entire row/column (like flex items can)
  3. Equal height rows in CSS Grid Layout
  4. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  5. Create a Masonry grid with flexbox (or other CSS)
  6. How can I make a div span multiple rows and columns in a grid?
  7. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  8. Can flex items wrap in a container with dynamic height?
  9. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  10. Prevent content from expanding grid items
  11. Make grid container fill columns not rows
  12. What’s the difference between align-content and align-items?
  13. Position deeply nested elements in a higher level grid container
  14. What is the difference between auto-fill and auto-fit?
  15. What does flex: 1 mean?
  16. Margin collapsing in flexbox
  17. Every item to have the same width as the widest element [duplicate]
  18. CSS Grid – Auto height rows, sizing to content
  19. Flexible box model – display : flex, box, flexbox? [duplicate]
  20. Prevent flex item from exceeding parent height and make scroll bar work
  21. What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)
  22. Can I have a varying number of columns per row in a CSS grid?
  23. The difference between flex:1 and flex-grow:1
  24. How to control number of items per row using media queries in Flexbox?
  25. Setting different lengths for grid gaps in CSS Grid
  26. How to stretch children to fill cross-axis?
  27. Can I make a CSS grid with dynamic number of rows or columns?
  28. Issue when centering vertically with flexbox when heights are unknown
  29. Do I not understand the flex-grow property?
  30. How can I force this CSS grid to wrap to a new line without specifying minmax sizes?

Leave a Comment