Layout

Grid

LightKit grid system consists of six columns and six rows. To be able to include the grid on your website, you need to mark container for the grid as a grid container, and all children as grid items.

<div class="lt-grid-container"> <div class="lt-col-1-2 lt-row-1-1"> -------First.------- </div> <div class="lt-col-3-4 lt-row-1-1"> -------Second.------ </div> <div class="lt-col-5-6 lt-row-1-1"> -------Third.------- </div> </div>

To be able to change width or height of the item - specify which columns/rows you would like to occupy. For example, if you want that your column span over two columns starting from the beginning, it means that you need column 1 and column 2. If you want the height of the first two rows, it means that you need row 1 and row 2.

<div class="lt-grid-container"> <div class="lt-col-1-2 lt-row-1-1"> -------First two columns, first row.------- </div> <div class="lt-col-1-1 lt-row-2-2"> -------First column, second row.------ </div> <div class="lt-col-2-2 lt-row-2-2"> -------Second column, second row.------- </div> </div>

Depending on screen width, you can apply different grid layout, using '-desktop', '-tablet', and '-mobile' suffixes.

<div class="lt-grid-container"> <div class="lt-col-1-3-desktop lt-row-1-1-desktop lt-col-1-1-tablet lt-row-1-1-tablet lt-col-1-1-mobile lt-row-1-1-mobile"> ---This item will take first three columns on a desktop size device, only first column on a tablet size device, and only first column on a mobile device.-- </div> <div class="lt-col-4-6-desktop lt-row-1-1-desktop lt-col-2-3-tablet lt-row-1-1-tablet lt-col-1-1-mobile lt-row-2-2-mobile"> ---This item will span over columns 4, 5, and 6 on a desktop size device, columns 2 and 3 on a tablet size device, and only first column on a mobile device of the second row.-- </div> </div>