SIP One - CSS Grid Layout
Aim and Objectives
The aim of this project was to actively learn how to us the CSS grid specification, including the terminology, properties and what they do to the HTML elements. My objectives were to demonstrate how to build a CSS grid layout and place and manipulate items on the grid.
What is CSS Grid Layout?
CSS Grid Layout is a new layout system that has completely changed the way developers design for the web (CSS Tricks, 2020). The powerful abilities of this rule-based layout technique be used to excel at dividing a page into major regions and define the size and position of smaller elements (Mozilla, 2020).
Unlike its predecessors, such as Float and InLine Block, CSS Grid enables designers to manipulate elements both on the horizontal axis, using rows, and on the vertical axis, using columns (CSS Tricks, 2020).
CSS grids was chosen as my first self-initiated project as it was a technique I wanted to use in my original site build, however I lacked knowledge and practice.
Before diving into this project, I had little to no experience using grid layouts, and was still using flex box and display block rules to manipulate elements in my designs. The prospect of two-dimensional design using one rule set sounded appealing and is what sparked my interest in selecting CSS Grid Layout for my project.
CSS Grid Set-up
Using CodePen, I was able to get to grips with the fundamentals of CSS Grid Layout, establishing a basic four column layout and ‘forking’ my way to understanding the CSS Grid Layout system and how to manipulate HTML elements within.
Grid By Example (Andrew, 2017), A Complete Guide to Grid (CSS Tricks, 2020) and Grid in CSS (CSS Reference, n.d.) were used as visual learning aids to help understand the key terminology CSS Grid Layout uses, and learn about each of the properties and their value.
CSS Grid Demonstrator
After getting to grips with the new terminology, properties and values of CSS Grid Layout, I dove into CodePen and began trying my newfound knowledge to form a basic grid layout.
In my first Pen, featured below, I used basic CSS Grid rules to establish a 4-column grid layout. Using long hand notations on this first Pen helped to broaden my understanding of this technique. I highlighted the grid lines using a dotted border to make the grid visible. This was done in order to further help understand how the technique works and also provide a visual to gauge the success of the CSS grid.
CodePen One
See the Pen Establishing a 4 column grid layout by Owain Tudor (@o_tudor) on CodePen.
In my second Pen, I took the CSS Grid Layout a step further by adding 4 rows to the grid, which created a 4 x 4 CSS Grid Layout. This Pen was also created using long hand notation.
CodePen Two
See the Pen Adding rows by Owain Tudor (@o_tudor) on CodePen.
Having established a basic CSS Grid Layout, I now possessed the fundamental understandings of how the grid is formed, using fr values to divide up the available space.
CodePen Three
See the Pen Adding items to the grid by Owain Tudor (@o_tudor) on CodePen.
The next step in this project was to start adding items and/or content to the CSS Grid Layout. As visible in my fourth Pen, I added a coloured block to the centre four sections of the CSS Grid Layout, creating a blue window in the centre of the screen.
CodePen Four
See the Pen Using short hand by Owain Tudor (@o_tudor) on CodePen.
Now that I had a solid understanding of how the CSS Grid Layout works and how to apply items to the grid, I revisited the notation and got to grips with using shorthand. Using shorthand reduced the number of lines of code needed to achieve the same layout and item placement. In my fourth Pen, you can see I was able to achieve the exact same layout and placement as my third Pen, albeit with four less lines of code.
My confidence in my ability to use the gird layout system grew quickly and I regret not attempting to learn it sooner, as once past learning the new ‘lingo’, it’s actually very simple and logical.
In my fifth and final Pen, I added some more items to the grid using shorthand notation and alignment properties to create a fluid final design.
CodePen Five
See the Pen Placing more items on the grid by Owain Tudor (@o_tudor) on CodePen.
Evaluation
This was a relatively small project however, I now have good knowledge and understanding of the CSS Grid Layout system and I am planning to use this in practice through a redesigning the layout of this portfolio website using CSS Grid. Keep your eyes peeled!
References
Andrew, R. (2017) Get Started with Grid Layout. Grid By Example. [Online] [Accessed on 8th May 2020] https://gridbyexample.com/learn/
CSS Reference. (n.d.) Grid in CSS. CSS Reference. [Online] [Accessed on 8th May 2020] https://cssreference.io/css-grid/
CSS Tricks. (2020) A Complete Guide to Grid. CSS Tricks. [Online] [Accessed on 8th May 2020] https://css-tricks.com/snippets/css/complete-guide-grid/
Mozilla. (2020) CSS Grid Layout. MDN Web Docs. [Online] [Accessed on 8th May 2020] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout#Reference