Grid of responsive squares

Question

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

User · Answer

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    x000D   x000D  html  x000D  body   x000D    margin  0  x000D    padding  0  x000D    x000D  div   x000D    height  25vw  x000D    width  25vw  x000D    background  tomato  x000D    display  inline-block  x000D    text-align  center  x000D    line-height  25vw  x000D    font-size  20vw  x000D    margin-right  -4px  x000D    position  relative  x000D    x000D    demo only   x000D   x000D  div before   x000D    content      x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    height  inherit  x000D    width  inherit  x000D    background  rgba 200  200  200  0 6   x000D    transition  all 0 4s  x000D    x000D  div hover before   x000D    background  rgba 200  200  200  0   x000D    x000D   lt div gt 1 lt  div gt  x000D   lt div gt 2 lt  div gt  x000D   lt div gt 3 lt  div gt  x000D   lt div gt 4 lt  div gt  x000D   lt div gt 5 lt  div gt  x000D   lt div gt 6 lt  div gt  x000D   lt div gt 7 lt  div gt  x000D   lt div gt 8 lt  div gt  x000D   x000D   x000D

User · Answer

You can make responsive grid of squares with verticaly and horizontaly 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     Grid of square images Grid of squares with content      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      lt div gt  lt  div gt    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     lt div class  square  gt       lt div class  content  gt             CONTENT HERE         lt  div gt   lt  div gt      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  lt -- 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     lt div class  square  gt       lt div class  content  gt           lt div class  table  gt               lt div class  table-cell  gt                      CONTENT HERE                  lt  div gt           lt  div gt       lt  div gt   lt  div gt      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

User · Answer

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

User · Answer

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          x000D   x000D   square-grid   x000D    display  flex  x000D    flex-wrap  wrap  x000D    justify-content  center  x000D    x000D   x000D   square-grid  cell   x000D    background-color  rgba 0  0  0  0 03   x000D    box-shadow  0 0 0 1px black  x000D    overflow  hidden  x000D    position  relative  x000D    x000D   x000D   square-grid  content   x000D    left  0  x000D    position  absolute  x000D    top  0  x000D    x000D   x000D   square-grid  cell after   x000D    content      x000D    display  block  x000D    padding-bottom  100   x000D    x000D   x000D     Sizes     Number of cells per row x000D   x000D   square-grid  cell--10   x000D    flex-basis  10   x000D    x000D   x000D   square-grid  cell--9   x000D    flex-basis  11 1111111   x000D    x000D   x000D   square-grid  cell--8   x000D    flex-basis  12 5   x000D    x000D   x000D   square-grid  cell--7   x000D    flex-basis  14 2857143   x000D    x000D   x000D   square-grid  cell--6   x000D    flex-basis  16 6666667   x000D    x000D   x000D   square-grid  cell--5   x000D    flex-basis  20   x000D    x000D   x000D   square-grid  cell--4   x000D    flex-basis  25   x000D    x000D   x000D   square-grid  cell--3   x000D    flex-basis  33 333   x000D    x000D   x000D   square-grid  cell--2   x000D    flex-basis  50   x000D    x000D   x000D   square-grid  cell--1   x000D    flex-basis  100   x000D    x000D   lt div class  square-grid  gt  x000D     lt div class  square-grid  cell square-grid  cell--7  gt  x000D       lt div class  square-grid  content  gt  x000D        Some content x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  square-grid  cell square-grid  cell--7  gt  x000D       lt div class  square-grid  content  gt  x000D        Some content x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  square-grid  cell square-grid  cell--7  gt  x000D       lt div class  square-grid  content  gt  x000D        Some content x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  square-grid  cell square-grid  cell--7  gt  x000D       lt div class  square-grid  content  gt  x000D        Some content x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  square-grid  cell square-grid  cell--7  gt  x000D       lt div class  square-grid  content  gt  x000D        Some content x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  square-grid  cell square-grid  cell--7  gt  x000D       lt div class  square-grid  content  gt  x000D        Some content x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  square-grid  cell square-grid  cell--7  gt  x000D       lt div class  square-grid  content  gt  x000D        Some content x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  square-grid  cell square-grid  cell--7  gt  x000D       lt div class  square-grid  content  gt  x000D        Some content x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Fiddle  https   jsfiddle net patrickberkeley noLm1r45 3   This is tested in FF and Chrome

User · Answer

Now we can easily do this using the aspect-ratio ref property  x000D   x000D   container     display  grid    grid-template-columns  repeat 3  minmax 0  1fr       3 columns      grid-gap  10px      container gt       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    x000D   lt div class  container  gt     lt div gt  some content here  lt  div gt     lt div gt  lt img src  https   picsum photos id 25 400 400  gt  lt  div gt     lt div gt       lt h1 gt a title lt  h1 gt     lt  div gt     lt div gt more and more content  lt br gt here lt  div gt     lt div gt       lt h2 gt another title lt  h2 gt     lt  div gt     lt div gt  lt img src  https   picsum photos id 104 400 400  gt  lt  div gt   lt  div gt  x000D   x000D   x000D   Also like below where we can have a variable number of columns  x000D   x000D   container     display  grid    grid-template-columns  repeat auto-fill  minmax 250px  1fr      grid-gap  10px      container gt       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    x000D   lt div class  container  gt     lt div gt  some content here  lt  div gt     lt div gt  lt img src  https   picsum photos id 25 400 400  gt  lt  div gt     lt div gt       lt h1 gt a title lt  h1 gt     lt  div gt     lt div gt more and more content  lt br gt here lt  div gt     lt div gt       lt h2 gt another title lt  h2 gt     lt  div gt     lt div gt  lt img src  https   picsum photos id 104 400 400  gt  lt  div gt     lt div gt more and more content  lt br gt here lt  div gt     lt div gt       lt h2 gt another title lt  h2 gt     lt  div gt     lt div gt  lt img src  https   picsum photos id 104 400 400  gt  lt  div gt   lt  div gt  x000D   x000D   x000D

[html] Grid of responsive squares

The answer is

Examples related to html

Examples related to css

Examples related to responsive-design

Examples related to grid-layout

Examples related to aspect-ratio

Tags