Jump to content

Responsive 5 columns?


Recommended Posts

Hi, I have been searching on the w3 schools site for info on making a 5 column layout. I am guessing I have to make a two column and 3 column on the same row? Or is there another way to do it?  Another thought I had was to make it 2 columns, 3 columns, 2 columns, 3 columns and 2 columns for the 12 column grid but that got really confusing.  Can I just do w3-fifth instead of w3-quarter? Help please? Thanks


Edited by emcy
Link to comment
Share on other sites

The 12 column grid is quite flexible.

I'd recommend even columns, but you want 5, so perhaps you can try your 2-3-2-3-2 method.

<div class="w3-row">
  <div class="w3-col s2"><img src="img_lights.jpg"></div>
  <div class="w3-col s3"><img src="img_nature.jpg"></div>
  <div class="w3-col s2"><img src="img_snowtops.jpg"></div>
  <div class="w3-col s3"><img src="img_lights.jpg"></div>
  <div class="w3-col s2"><img src="img_nature.jpg"></div>


Link to comment
Share on other sites

5 even column, make first and and last size s1 the rest s2, give w3-row a minus margin left and right the size of column s1 and maybe any margin widths on columns.

The first and last will be spacer columns, the minus left and right margins will make the spacer column extend beyond w3-row boundary, causing the 5 column fill the total width of w3-row.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...