Grid Layout – Changing number of columns

Some times the full desktop layout of 3 columns on ‘Grid’ is not right,maybe in a narrower section a 2×2 works or a wider design 4 x1 works.

To change the number of columns is via some simple CSS

To change to 2 columns on desktop you can use additional CSS as follows

section.wfea.grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

And for 4 columns

section.wfea.grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

For smaller screens the break points are 900 and 450 and degrades to 2 then 1 I doubt you would want to change those but for reference:

 @media (max-width: 900px) {
    section.wfea.grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 450px) {
    section.wfea.grid {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }

Was this helpful?

Next Article

General Styling