grids

W3.CSS Grids

W3.CSS includes a simple and powerful grid system for building layouts. Grids can be created using the w3-row and w3-col classes.

Basic Grid Example

<div class="w3-row">
  <div class="w3-col m4 w3-blue">Column 1</div>
  <div class="w3-col m4 w3-green">Column 2</div>
  <div class="w3-col m4 w3-red">Column 3</div>
</div>

Column Sizes

You can define column widths by specifying fractions (e.g., w3-half, w3-third):

<div class="w3-row">
  <div class="w3-col w3-third w3-light-blue">1/3</div>
  <div class="w3-col w3-twothird w3-light-green">2/3</div>
</div>