Grid system
Types of grid implementations
SQ-Grid offers three types of grids:
- CSS Grid-based
- Flexbox-based
- Float-based
The grid which the browser should use is determined by @supports queries. In case the browser supports either native CSS grids or flexbox, the UI kit exposes class rules which the developer can use to manipulate the grid according to either grid or flexbox rules. In case the browser doesn't support either of those two features, the UI kit defaults to using floats to establish the grid rules.
Usage
The grid uses a maximum of 12 columns per row. All the width calculations and corresponding classes are based on the 12-column layout.
The grid consists of the following classes:
- .sq-grid - The parent which wraps the grid columns. By default, it does not contain any CSS rules.
- (.sq-grid).css-grid - This is an additional class to .sq-grid which enables the usage of the native CSS grid feature.
- (.sq-grid).css-flexbox - An additional class to .sq-grid. It enables the flexbox implementation of the grid system.
- (.sq-grid).auto-col-width - An additional class to .sq-grid. When this class is added, the columns width is calculated automatically (based on 12-column layout).
- .col - The class for every child of the .sq-grid container. Represents a single column of the grid.
- (.col).span-{<number>, where <number> can be an integer between 1 and 12} - An additional class to .col. It can be used to manually set the width of box. For example, .col.span-4 would mean that the box would span 4 columns.
1. Basic usage
Default CSS grid implementation:
- the grid container is split into 12 columns, 1fr each
- every column spans exactly 1fr and doesn't expand to fill in the remaining space
And, respectively, the code:
<div class="sq-grid css-grid">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Blanditiis dolore facere laboriosam nam reiciendis repellat tempora!
Architecto at dolores excepturi iure magni necessitatibus nisi nulla quam rerum sunt voluptate, voluptatum!
</div>
...
</div>
Default flexbox implementation:
The default flexbox implementation formats the content according to the following rules:
- every column has an ideal width of 100%/12 and expands when needed
- every column expands to fill in the remaining space if the maximum of 12 columns isn't reached
The code for which would be:
<div class="sq-grid css-flexbox">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Blanditiis dolore facere laboriosam nam reiciendis repellat tempora!
Architecto at dolores excepturi iure magni necessitatibus nisi nulla quam rerum sunt voluptate, voluptatum!
</div>
...
</div>
2. Automatic column calculation
Automatic column calculation is enforced on the grid container by adding the .auto-col-width class. The content is formatted differently, according to the implementation of the grid layout.
CSS grid implementation with automatic column calculation:
Adding the .auto-col-width class to the grid container will split it into 12 columns, each one with a varying width between a minimum of (100/12 * 1em) and 1fr. This will force every column to expand to fill in the remaining space inside the grid container.
<div class="sq-grid css-grid auto-col-width">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Blanditiis dolore facere laboriosam nam reiciendis repellat tempora!
Architecto at dolores excepturi iure magni necessitatibus nisi nulla quam rerum sunt voluptate, voluptatum!
</div>
...
</div>
Flexbox implementation with automatic column calculation:
Adding the .auto-col-width class to the grid container will split it into 12 columns and the width of one column is calculated according to the total number of columns present inside the grid container.
<div class="sq-grid css-flexbox auto-col-width">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Blanditiis dolore facere laboriosam nam reiciendis repellat tempora!
Architecto at dolores excepturi iure magni necessitatibus nisi nulla quam rerum sunt voluptate, voluptatum!
</div>
...
</div>
3. Giving specific width to columns
Whenever we need to have unevenly split columns, we can manually set their width by adding the
.span-<number> class.
<number> can be an integer between 1 and 12.
Let's say we want our content to be split into 3 boxes. We want the first box to span 6 columns, the
second - 2 columns, and the third one - 4 columns.
CSS-grid columns with manually set width:
<div class="sq-grid css-grid">
<div class="col span-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolore facere laboriosam nam reiciendis repellat tempora!
Architecto at dolores excepturi iure magni necessitatibus nisi nulla quam rerum sunt voluptate, voluptatum!
</div>
<div class="col span-2">...</div>
<div class="col span-4">...</div>
</div>
Flexbox columns with manually set width:
<div class="sq-grid css-flexbox">
<div class="col span-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolore facere laboriosam nam reiciendis repellat tempora!
Architecto at dolores excepturi iure magni necessitatibus nisi nulla quam rerum sunt voluptate, voluptatum!
</div>
<div class="col span-2">...</div>
<div class="col span-4">...</div>
</div>