W3.CSS — Grid

Basic Grid

<div class="w3-row">
    <div class="w3-half">Half</div>
    <div class="w3-half">Half</div>
</div>

Grid Columns

<!-- 1/3 + 2/3 -->
<div class="w3-row">
    <div class="w3-third">1/3</div>
    <div class="w3-twothird">2/3</div>
</div>

<!-- 1/4 + 1/4 + 1/2 -->
<div class="w3-row">
    <div class="w3-quarter">1/4</div>
    <div class="w3-quarter">1/4</div>
    <div class="w3-half">1/2</div>
</div>

<!-- Equal columns -->
<div class="w3-row">
    <div class="w3-third">1/3</div>
    <div class="w3-third">1/3</div>
    <div class="w3-third">1/3</div>
</div>

Responsive Grid

<div class="w3-row-padding">
    <div class="w3-col m4">
        <div class="w3-card-4">Column 1</div>
    </div>
    <div class="w3-col m4">
        <div class="w3-card-4">Column 2</div>
    </div>
    <div class="w3-col m4">
        <div class="w3-card-4">Column 3</div>
    </div>
</div>

Grid with Margins

<div class="w3-row-padding">
    <div class="w3-col m6 l4">
        <div class="w3-card-4 w3-padding">Card 1</div>
    </div>
    <div class="w3-col m6 l4">
        <div class="w3-card-4 w3-padding">Card 2</div>
    </div>
    <div class="w3-col l4">
        <div class="w3-card-4 w3-padding">Card 3</div>
    </div>
</div>

Grid Examples

<!-- Product grid -->
<div class="w3-row-padding">
    <div class="w3-col m6 l3">
        <div class="w3-card-4">
            <img src="product1.jpg" style="width:100%">
            <div class="w3-container">
                <h4>Product 1</h4>
                <p>$29.99</p>
            </div>
        </div>
    </div>
    <!-- Repeat for more products -->
</div>

<!-- Dashboard grid -->
<div class="w3-row-padding">
    <div class="w3-col m3">
        <div class="w3-card-4 w3-blue w3-padding">
            <h3>100</h3>
            <p>Users</p>
        </div>
    </div>
    <div class="w3-col m3">
        <div class="w3-card-4 w3-green w3-padding">
            <h3>50</h3>
            <p>Orders</p>
        </div>
    </div>
    <div class="w3-col m3">
        <div class="w3-card-4 w3-orange w3-padding">
            <h3>25</h3>
            <p>Products</p>
        </div>
    </div>
    <div class="w3-col m3">
        <div class="w3-card-4 w3-red w3-padding">
            <h3>10</h3>
            <p>Errors</p>
        </div>
    </div>
</div>

Mini Practice

Create HTML code that:

1. Creates a basic 2-column grid
2. Adds a 3-column grid
3. Creates a responsive product grid
4. Builds a dashboard layout

Up Next

Next: Learn about W3.CSS Flexbox.