Aim:
To implement CSS Grid on a website or layout
Objectives:
The CSS Grid layout is a “two dimensional” (W3.org, 2017) layout system, optimized for efficient user design and interface. The HTML stays the same but the grid introduces a new set of CSS syntax that help establish the grid as the most talked about layout system of 2017.
What makes CSS Grid the most powerful layout system available in CSS is its ability to handle both columns and rows unlike Flexbox.
The context of this project was to recreate a layout of a website using CSS grids but after talking to guest developers and designers that had come to visit Manchester Metropolitan University, they had advised me to slightly tweak the design and instead of recreating a typical layout of a website, use CSS Grid to create a photo grid full of information.
The reason for this was a website layout could be made exactly the same way using Flexbox, so the purpose of this demonstrator was not only learn CSS Grids but to learn the best way to use it.
Talking about Flexbox, the comparison has been made already asking which one is better, Flexbox or Grid. Flexbox is a one dimensional layout which helps get objects positioned in a horizontal line or vertically aligned using their easy and responsive syntax. What CSS Grid offers that Flexbox doesn’t is if you want to create a grid with rows and columns all different widths and heights but still fit perfectly in that very same grid. This two dimensional approach helps with creating a more versatile and effective layout for modern designs.
I had no knowledge of CSS Grid prior to this project but neither did the majority of people. The new technology that is Grid is currently not supported in all browsers and not many tutorials are online to watch in order to gain an understanding of the basics.
Luckily CSS-TRICKS had a complete guide to Grid so with the help of the examples and learning the different function of CSS Grid it helped me create the final demonstrator.
The set-up, not so simple. Since CSS Grid is not supported by some browsers, on google chrome the developer flags where enabled to allow CSS Grid to display and work on my laptop.
Since I was completely new to CSS Grid, I first went to codepen to play around with some basic grids to try to get a hang of it. Eight boxes where created with empty child divs and the grid with ‘display:grid’ on the parent div.
Since I was completely new to CSS Grid, I first went to codepen to play around with some basic grids to try to get a hang of it. Eight boxes where created with empty child divs and the grid with ‘display:grid’ on the parent div.
Within the parent div three new CSS properties were defined, “grid-template-columns”, “grid-template-rows” and “grid-gap” all define how many and the size of the boxes making it into a perfectly aligned grid.
See the Pen evGvNp by tanvir ali (@tannyweb1) on CodePen.
Now I had a hang of creating a basic grid. The first step was to create a grid container and then add grid items within it. This acted like the parent – child elements for the grid.
A display grid was used onto the parent element to initiate the layout. As mobile first is the best way to design because it “assures the website is responsive for customers on all devices” (Hill, 2017)
Once the basic grid was created, my idea was when the browser window increases its size, the grid to change from a simple stacked grid to have each element into different sizes but still form a compacted grid and using CSS Grid was the perfect technology for this.
As the grid grew in size, the CSS property “grid column” and “grid row” was used on each different div to place the item on the grid. The forward slash "/" was used to write the start and end position of the item on the grid.
See the Pen evGvNp by tanvir ali (@tannyweb1) on CodePen.
CSS Grid is an amazing skill to learn, and something that is going to be seen in more and more websites once it is supported by all browsers. From using Flexbox you can see Grids has more freedom of movement and layout and not so linear like Flexbox. This offers a more complex and creative design to be created in CSS Grid. From my personal development, I would want to incorporate CSS Grid in more of my projects and work with Flexbox so both technologies can work efficiently and effectively to create complex and interesting layouts for future websites.
Hill, S. (2017). Mobile First Design - The Benefits of This Approach. [online] CShop Blog. Available at: http://www.cshop.co.uk/blog/the-importance-of-mobile-first-design/ [Accessed 15 Mar. 2017].
W3.org. (2017). CSS Grid Layout Module Level 1. [online] Available at: https://www.w3.org/TR/css3-grid-layout/ [Accessed 15 Mar. 2017].
