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

Share this post

Link to post
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>


Share this post

Link to post
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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...