Grid Layout

Open in Figma View all renders

Grid layout

The example has dummy content to show how the grid layout works. The grid layout is a flexible grid system that can be used to create a variety of column layouts. The grid layout is responsive and will adjust the number of columns based on the data-col attribute. 

<div class="grid-layout" data-col="1" data-col-tablet="2" data-col-desktop="3">
    <div class="info-card">
        <div class="padding-m">
            card title
        </div>
        <div class="padding-m">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
            voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim, labore
            adipisci magnam iure! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consequuntur ipsa
            sapiente a rror minima ea, labore quibusdam placeat maxime praesentium repellendus itaque inventore
            temporibus accusantium ducimus commodi totam dolore?
        </div>
        <div class="padding-m">
            action bar
        </div>
    </div>
    <div class="info-card">
        <div class="padding-m">
            card title
        </div>
        <div class="padding-m">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
            voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim, labore
            adipisci magnam iure! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consequuntur ipsa
            sapiente a rror minima ea, labore quibusdam placeat maxime praesentium repellendus itaque inventore
            temporibus accusantium ducimus commodi totam dolore?
        </div>
        <div class="padding-m">
            action bar
        </div>
    </div>
    <div class="info-card">
        <div class="padding-m">
            card title
        </div>
        <div class="padding-m">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
            voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim, labore
            adipisci magnam iure! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consequuntur ipsa
            sapiente a rror minima ea, labore quibusdam placeat maxime praesentium repellendus itaque inventore
            temporibus accusantium ducimus commodi totam dolore?
        </div>
        <div class="padding-m">
            action bar
        </div>
    </div>
</div>

Last fill grid layout

The last-fill modifier will make the last card in the grid fill the remaining space. You can also opt for tablet screen size and above, desktop screen size and above or tablet. 

<div class="grid-layout grid-layout--last-fill" data-col="1" data-col-tablet="2" data-col-desktop="3">
    <div class="info-card">
        <div class="padding-m">
            card title
        </div>
        <div class="padding-m">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
            voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim.
        </div>
        <div class="padding-m">
            action bar
        </div>
    </div>
    <div class="info-card">
        <div class="padding-m">
            card title
        </div>
        <div class="padding-m">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
            voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim.
        </div>
        <div class="padding-m">
            action bar
        </div>
    </div>
    <div class="info-card">
        <div class="padding-m">
            card title
        </div>
        <div class="padding-m">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
            voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim.
        </div>
        <div class="padding-m">
            action bar
        </div>
    </div>
</div>