Grid

Version 2.0.0

Breaking changes will affect this part of system after release. Note: lagacy is avaiable if you still need support for this feature

Intro

A grid provides a structure of rows and columns for aligning content. Grids are useful because they help create a familiar and easily navigable structure for content.

Syntax

Grids are built of three things: row, column, and content. This way the columns in a grid can be thought of as “buckets” for content, e.g. a component, widget or module.

<!-- Row -->
<div class="kx-row">
    <!-- Column -->
    <div class="kx-col">
        <!-- Content -->
        <div>Content</div>
    </div>
</div>

It is recommended to give your grid some breathing space between itself and the viewport edges. By putting your grid HTML inside a <div class="kx-container">...</div> you get default padding on the left and right side. See Container for more details.

Fluid

Grids uses precentage-based values to make fluid widths. Gutters are handled using static values for padding (gutters inside). This way we can mix fluid columns with static gutters. Each column uses split-gutters. This means the padding is equal to a half gutter.

Test here

Automatic wrapping

Grid rows are set to automatically wrap if the columns do not fit a in a row. In this example a 4 column + a 10 column will exceed the maximum 12 column grid, hence the last column wraps to a new line.

Responsive

Modifier-classes for responsive behavior enables you to specify column sizes at different viewport widths. Please note that these modifiers correspond to the breakpoints in the component library.

Try resizing your browser to see how the grid below changes based on viewport width.

The convention for responsive grid classes can be a bit overwhelming at first, but you’ll see that it includes some syntactical sugar that makes it quite logical.

  // The convention is: 
  [namespace]-col--[columns][@scope]

Here is an example:

<div class="kx-row kx-row--gutters">
    <div class="kx-col kx-col--12 kx-col--6@mob-m kx-col--4@tab-m kx-col--3@ltp-s">
        <div>Responsive</div>
    </div>
</div>

The example above can be read like: “This column should be…”:

• kx-col--12 …12 of 12 columns wide (100%) at all screen sizes, but…
• kx-col--6@mob-m …6 of 12 columns wide (50%) at screens > medium mobile, but…
• kx-col--4@tab-m …4 of 12 columns wide (33%) at screens > medium tablet, but…
• kx-col--3@ltp-s …3 of 12 columns wide (25%) at screens > small laptop