Responsive 5 columns?

[emcy]

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

B

Edited January 22, 2020 by emcy

[Funce]

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>
</div>

 

[dsonesuk]

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.