{"id":255557,"date":"2018-02-20T20:54:38","date_gmt":"2018-02-20T19:54:38","guid":{"rendered":"https:\/\/www.elmastudio.de\/?p=255557\/"},"modified":"2018-02-21T03:29:41","modified_gmt":"2018-02-21T02:29:41","slug":"introduction-to-css-grid-layouts","status":"publish","type":"post","link":"https:\/\/www.elmastudio.de\/en\/introduction-to-css-grid-layouts\/","title":{"rendered":"Introduction to CSS Grid Layouts"},"content":{"rendered":"

CSS Grid layouts are definitely<\/strong> one of the most exciting developments in CSS for years. It’s what all web designers and frontend developers have always dreamed of.<\/p>\n

Finally, we are able to convert our grid-based web designs directly into CSS without the help of javascript hacks or any kind of weird CSS technics. That sounds super exciting, doesn’t it? With CSS Grid, we can flexibly position any element of a web page just with CSS (such as our header, footer, sidebar or content blocks) exactly where we need it, regardless of its actual position in the markup. Here is a first overview of how this works.<\/p>\n

How CSS Grid works<\/h3>\n

Until now we have done everything we could (floating, flexbox, and javascript hacks)<\/em>, in order to be able to convert our responsive web designs into code. Often we have even reached our limits and certain layouts were simply not easily realized.<\/p>\n

All these efforts are finally coming to an end the introduction of CSS Grid layouts(Yeah!)<\/em>. With CSS Grid we can now create grid columns and grid rows (vertical and horizontal lines) inside a container and then place our website elements completely flexible inside this grid.<\/p>\n

\n\"\"\n<\/div>\n

This new possibility is especially exciting for responsive web design, as we can now react much easier to different screen sizes and much easily adapted layouts with the help CSS Grid and a few added media queries.<\/p>\n

Learn the CSS Grid Terminology<\/h3>\n

To use CSS Grid we need to learn some new terms, which I have summarized here in a small overview.<\/p>\n

Grid container<\/h5>\n

Grid Container is the element inside the grid will be build. The CSS class to assign to your element is display: grid<\/code>.<\/p>\n

Grid item<\/h5>\n

Each element, that is directly inside the grid container is a grid item (so all elements that are nested inside the grid items don’t be come grid items themselves).<\/p>\n

Grid line<\/h5>\n

There are two different types of grid lines. The vertical lines are called “grid columns”<\/em> and the horizontal grid lines are called “rows”<\/em>.<\/p>\n

\"\"<\/p>\n

Grid cell<\/h5>\n

Each cell of the grid is called grid cell. A grid cell is defined by two grid columns and two grid rows.<\/p>\n

\"\"<\/p>\n

Grid area<\/h5>\n

Multiple cells together are called a grid area.<\/p>\n

\"\"<\/p>\n

Grid track<\/h5>\n

A Grid track is the space between two column lines or two grid lines.<\/p>\n

\"\"<\/p>\n

Grid gap<\/h5>\n

Grid columns and rows can have a grid gap, which is mostly called gutter<\/em> in traditional design grids. It can have a fixed pixel value of e.g. 40px. It’s important to note that in CSS grid the gaps are not added to the first grid lines, so not at the outside of the grid, which is in contrary very common in traditional design grids.<\/p>\n

\"\"<\/p>\n

The value fr<\/h5>\n

fr<\/strong> (which stands for fraction)<\/em> is a new value created for CSS grid. grid-container: 1fr<\/code> means, that one fraction of the available space will be used.<\/p>\n

Grid template column<\/h5>\n

So you can add your grid columns to your grid container like this:<\/p>\n

\r\ngrid-template-columns: 2fr 1fr 1fr;\r\n<\/pre>\n
The layout result will look like this: <\/p>\n
\"\"<\/p>\n
Grid template rows<\/h5>\n
The default value for grid rows is “auto”<\/em>. This means the content inside the grid row will define the height of the row. You can also add pixel or percentage values.<\/p>\n
\r\ngrid-template-rows: 120px 25% auto;\r\n<\/pre>\n
CSS Grid Browser Compatibility<\/h3>\n
Of course, at the moment there are still some older browsers that cause trouble and don’t offer CSS Grid support (which right now is mainly Internet Explorer 11).<\/p>\n
It’s best to check the caniuse.com<\/a> website on a regular basis, to see the current state of browser support for CSS grid. Windows Edge was still an issue a few months back, but the latest version now supports CSS grid.<\/p>\n
Can we use CSS Grid now?<\/h3>\n
At Elmastudio we are currently working to integrate some CSS Grid functionality to our newest WordPress theme Pukeko<\/a>. In my opinion, a reasonable approach to the use of CSS Grid today is to recognize that not all browsers have to display a web design in the exact same way, and of course we are already all used to this since responsive web design is around.<\/p>\n
Morten Rand-Hendriksen explains this approach in his CSS Grid Presentation<\/a> from WordCamp Europe 2017, where he describes his approach to use CSS grid today. He says we should realize that a website looks different in different browsers and on different screen sizes and we can also use this for CSS grids.<\/p>\n
He suggests  (and I also think this approach is the best solution at the moment)<\/em> creating a mobile-first web design without the help of CSS grid and offer this web design for older browsers that don’t support CSS grids as well.<\/p>\n
Then you can add to use CSS grid functionality for modern browsers and bigger screen sizes using Media Queries<\/a>, in order to create your more complex, multi-column web design.<\/p>\n
This is the only way we, as web developers, can help to push the development of modern tools forward. By adopting new options as early as possible we can guarantee that they will become the new standard faster and that browser compatibility for CSS grids is soon an issue of the past.<\/p>\n
Your Feedback<\/h4>\n
What are your thoughts on CSS Grid and what questions do you have? Are you using CSS Grid and maybe even built a live website already? Do you know other helpful resources on the topic and at what time do you think CSS Grids will be norm? <\/p>\n
Just write me a comment with your questions and your thoughts below, I’m looking forward to your feedback.<\/p>\n
Further helpful resources to learn CSS Grid<\/h5>\n
– CSS Tricks detailed guide A Complete Guide to Grid<\/a>.
\n– The A Book Apart book A New CSS Layout<\/a> by Rachel Andrew.
\n– All  CSS grid related posts<\/a> on Smashing Magazine.
\n– Morten Rand-Hendriksens talk CSS Grid Changes Everything (About Web Layouts)<\/a> at WordCamp Europe 2017.
\n– The Layout Land<\/a> Youtube channel with a number of super helpful videos explaining CSS Grid.
\n– The detailed resource list Learn CSS Grid<\/a> on Jen Simmons blog.<\/p>\n
Reading time:<\/strong> about 4 minutes<\/p>\n","protected":false},"excerpt":{"rendered":"
CSS Grid layouts are definitely one of the most exciting developments in CSS for years. It’s what all web designers and frontend developers have always dreamed of. Finally, we are able to convert our grid-based web designs directly into CSS without the help of javascript hacks or any kind of weird CSS technics. That sounds […]<\/p>\n","protected":false},"author":1,"featured_media":255450,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1377,1397],"tags":[1179,1396,1400,1398,1330,1399],"class_list":["post-255557","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","category-css","tag-css","tag-css-grid","tag-css-grid-layout","tag-grid-systems","tag-layouts","tag-learning"],"_links":{"self":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/posts\/255557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/comments?post=255557"}],"version-history":[{"count":0,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/posts\/255557\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/media\/255450"}],"wp:attachment":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/media?parent=255557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/categories?post=255557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/tags?post=255557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}