Lightweight grid system for advanced horizontal and vertical app layouts, with support for older browsers.
Lightweight grid system for advanced horizontal and vertical web app layouts, with support for older browsers.
npm install gridlayout
bower install gridlayout
If you need to create complex app layouts, similar to native ones, with support for older browsers.
If you just support modern browsers, you’re probably better off using Flexbox.
Browsers that support the overall grid, but not the scrollview:
For overall IE support you have to include the
For IE8, also include Respond.js, because the grid is mobile-first.
GridLayout is built using
display: table, so you don't have to specify an exact cell size.
If you don't set cell sizes, they will be evenly sized.
You can also do vertical layouts, using the
gl-verticalclass on the grid container.
Vertical layouts will take up the entire height of their container.
The breakpoints used in GridLayout are:
By default, the grid will show up on medium(640px or wider) screens.
If you want the grid to show up on any screen size, use the
GridLayout provides a 12-column grid that you can use on both horizontal and vertical grids.
On horizontal grids the size is the width, while on vertical grids the size is the cell height.
The class names contain the media query breakpoint and the size.
- Usegl-sm-1throughgl-sm-12to size cells on any screen size. If you want the cells to show up small screens, make sure the grid container has thegl-smclass.
- Usegl-md-1throughgl-md-12for cell sizes on medium screens.
- Usegl-lg-1throughgl-lg-12for cell sizes on large screens.......
You can also manually set a cell size with CSS, and the other cells without a size set will automatically resize.
You can easily nest grids, just make sure you include theglgrid container.
<div class="gl"> <div class="gl-cell">...</div> <div class="gl-cell">...</div> </div>...
To make a grid to take up the full height of its container, use thegl-fillclass.
<div class="gl gl-fill"> ...
By default, the cells will expand to fit their contents.
To have fixed cell sizes, and have the content scroll, you can use the scrollview.
Because of cross-browser concerns, the scrollview requires two containers.
<div class="gl-scrollview"> <div class="gl-scrollview-content"> ... </div> </div>
Full height children
To have a full-height child element in agl-cellwithout using a scrollview (eg. as with sticky footers) use thegl-fillclass, instead ofheight: 100%, on the child element.
This helps the IE support script find your element and size it correctly, because IE doesn't pass the correct height togl-cellchildren.
Because of Firefox issues with passing height to child elements without having a specific height set on the parent, you also have to use thegl-fillclass on the parentgl-cell.
<div class="gl-fill"> Full Cell Height Container </div>
Vertically aligning content
You can align content vertically inside cells using thegl-align-middleandgl-align-bottomclasses....
GridLayout is licensed under the MIT license.