CSS Grid Layout — Coming soon to a browser near you
With responsive design no longer an industry buzzword and simply an expected standard, the evolution of web layouts has come a long way since the dark times of table based layouts. From tables to floats, to front-end frameworks, meet the new player in town scheduled for great things in 2017 … CSS Grid Layout.
Popular grid systems like Twitter’s Bootstrap and Zurb’s Foundation have been the heavyweights of the responsive design era with regards to layout solutions, however this year Grid Layout might possibly rise up from the shadows like Rocky Balboa to claim a knock out.
WHY THE NEED FOR AN ALTERNATIVE GRID SYSTEM?
One of the obstacles facing us developers using a current grid system like Bootstrap, is the control and configuration of columns in the grid. The default grid in Bootstrap provides you with a 12-column layout, but let’s say for example you wanted to have a grid consisting of 14 columns. This is easy enough, you could simply edit the variables in the appropriate Bootstrap LESS file using the following syntax …
@grid-columns: 14;What if however you only wanted this grid for the header and also wanted to add another container grid to the page consisting of 8 columns that span the full width of the page and have no spacing between them so you could create the layout below?
Now you are stuck and connected to a caffeine drip all night hacking your way to achieve this layout.
GRID LAYOUT TO THE RESCUE
Grid Layout solves these issues effortlessly by allowing you to add as many grids to the page as you like, as well as allowing you to easily define and customise the number of columns, width of columns, number of rows as well as gutters in each grid.
SO WHAT IS GRID LAYOUT?
Grid Layout is a new module currently in development, which will allow CSS authors to control both the position and size of elements on a page through the use of a grid compromising of a set of vertical and horizontal lines. This coordinate system will allow the author to create powerful layouts on a 2-dimensional structure, that can adapt and make impressive new layouts while maintaining well structured, semantic HTML mark-up.
Current grid systems in use are based on a single axis with the content flowing from left to right through floats. Grid Layout works on a two-way axis allowing developers full control over the exact placement of elements on the grid. Lets say for example you have been asked to develop the following layout without altering the structure of the HTML.
By utilising the powerful features of Grid Layout, this layout can be accomplished easily with little effort.
One question sure to crop up from developers is ‘should I use this instead of Flexbox?’ The answer is simple … ‘you can use BOTH’. Grid Layout is not an alternative to Flexbox, both have similar qualities, but both are also different in their intended use and if used together can create even more powerful layouts than we are currently seeing on the web today.
The web is becoming a little too familiar in the layout of web pages. The introduction of grid frameworks such as Bootstrap have of course made building responsive sites easier now than they ever were, however are designers falling into a trap of designing sites to fit these grids instead of front-end authors developing a custom grid to fit their designs?
Grid Layout could possibly change this by allowing developers to create custom grids that break the mould and allow more explicit control of content placement.
HOW DO I SET IT UP?
Similar to a table, a basic Grid Layout set-up compromises of columns and rows which are defined in the CSS. A container element is defined as a ‘grid’ and given properties that define multiple options such as columns and rows, gutters and even templates. See example below for a basic set up producing a grid with 4 columns and 3 rows.
.grid-wrapper {
display: grid;
grid-template-columns: 250px 250px 250px 250px;
grid-template-rows: 100px 500px 100px;
}
Authors have full control over the number of columns and rows that can be added as well as powerful functions for naming and repeating columns and rows. The example below uses the repeat function for creating 4 columns each with a name of ‘mycolumn’, producing the same result as above.
.grid-wrapper {
display: grid;
grid-template-columns: repeat(4, [mycolumn] 250px);
grid-template-rows: 100px 500px 100px;
}Defining ‘grid-template-areas’ can create more complex layouts. By allocating slots on the grid for specific elements using arbitrary names, authors now have a powerful tool for changing the structure of the visual layout without the need for touching the HTML mark-up. See example below for a basic example of a template defined in the CSS and its visual output.
.grid-wrapper {
display: grid;
grid-template-columns: 250px 250px 250px 250px;
grid-template-rows: 100px 500px 100px;
grid-template-areas: "header header header header"
"article article article aside"
"footer footer footer footer";
}header { grid-area: header; }
article { grid-area: article; }
aside { grid-area: aside; }
footer { grid-area: footer; }
The above examples only scratch the surface of what’s possible using Grid Layout, with many more powerful features out with the scope of this introductory article, but clearly give a tantalising glimpse of what could possibly be one of this years’ hottest topics for developers.
WHEN CAN I GET MY HANDS ON IT?
Currently Grid Layout is not ready to be used in production, and currently only a W3C Working Draft. It’s expected to have support across major browsers in March this year however this could change so best to keep an eye on the latest updates.
You can however get started with your learning curve (it’s pretty steep but worth it) and experiment by enabling special flags in your browser.
In Chrome go to chrome://flags and enable ‘experimental web platform features’, or in Firefox enable layout.css.grid.enabled to start your Grid Layout journey.
Whether Grid Layout lives up to it’s hype this year and becomes a major contender for CSS authors in their choice of layout method is unknown, one thing for sure based on my own experiments in the browser, is that 2017 could see a plethora of new and varying visual layouts which can only be a good thing for the web and its users.
Original post published on https://www.mercurytide.co.uk/blog/article/css-grid-layout/
