QuitExams

W3.CSS Grid Classes

W3.CSS grid classes help create responsive layouts with rows and columns. Each column adjusts based on the screen size.

1️⃣ Row Container (w3-row)

Wrap columns inside a row. Columns must be children of a w3-row.

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

<div class="w3-row">
  <div class="w3-col l4 w3-green">Column 1</div>
  <div class="w3-col l4 w3-orange">Column 2</div>
  <div class="w3-col l4 w3-purple">Column 3</div>
</div>

2️⃣ Column (w3-col)

Use w3-col with size classes for different breakpoints: s (small), m (medium), l (large).

<div class="w3-row">
  <div class="w3-col s6 w3-red">50% width</div>
  <div class="w3-col s6 w3-blue">50% width</div>
</div>

<div class="w3-row">
  <div class="w3-col l3 w3-teal">25% width</div>
  <div class="w3-col l9 w3-orange">75% width</div>
</div>

3️⃣ Container (w3-container)

Add padding inside columns for spacing.

<div class="w3-row">
  <div class="w3-col s12 w3-container w3-red">Full width</div>
</div>

<div class="w3-row">
  <div class="w3-col m6 w3-container w3-blue">Left</div>
  <div class="w3-col m6 w3-container w3-green">Right</div>
</div>

4️⃣ Responsive Columns (s/m/l)

Use s for small, m for medium, l for large screens.

<div class="w3-row">
  <div class="w3-col s12 m6 l4 w3-red">Column 1</div>
  <div class="w3-col s12 m6 l4 w3-blue">Column 2</div>
  <div class="w3-col s12 m12 l4 w3-green">Column 3</div>
</div>