Layouts using CSS Grid

CSS Grid is a relatively new CSS module allowing developers to create complex website layouts in a two-dimensional grid. CSS Grid is now being widely used and supported in most modern browsers. As I have not used CSS Grid before, I decided that this project was an ideal opportunity to experiment with Grid and learn how it can be used for layouts.

Aim & Objectives

Aim

To use CSS Grid to create a responsive layout for the internal pages of SaveOurPlanet.

Objectives

  • Research current environmental issues to establish content.
  • Design a prototype of how the site will look.
  • Using Adobe XD’s new “auto-animate” feature, experiment with various animations.
  • Develop the site using HTML, CSS (using CSS Grid), JavaScript and GreenSock.

Definition

CSS Grid is a relatively new layout module implemented into CSS. Unlike other layout systems in CSS, such as Flexbox, CSS Grid is two dimensional, meaning it can handle both columns and rows. This makes CSS Grid a powerful tool to create modern website layouts. CSS Grid provides a way for developers to create more complex layouts without having to rely on hacks. As Grid has been around for a while now, browser support is looking good. Grid is now fully supported in all major browsers such as Chrome, Firefox, Safari and Edge, as well as having partial support in IE10 and 11.

Set Up

To create this project, HTML, CSS (SCSS), BEM Methodology, JavaScript, GreenSock and a little bit of jQuery was used. To version control this project, I used Gitlab. I used Firefox Developer Edition as this comes equipped with a grid viewer which was useful when developing this project, as I could visually see the grid and understand the effects that certain declarations were having on the layout.

Location

To view this project live, visit: SaveOurPlanet

To view the source code of this project, see my Gitlab project.

How

For this project, I intended on using CSS Grid on the internal pages that were designed using a grid layout. Before attempting to use CSS Grid, I developed the loading screen and main screen first using other methods such as Flexbox, as this did not require a grid. Once this had been completed, I began working on the internal pages. With no prior experience using CSS Grid, I first set out to learn all the terminology. I found 'A Complete Guide to Grid' on CSS Tricks a very useful resource for this as the terminology is nicely broken up into understandable segments.

Establishing CSS Grid is simple, by putting 'display: grid;' on the container, the grid format will be applied. Next, I looked at how to recreate the grid I used in Adobe XD in CSS. After reading the CSS Tricks article, I learned that grid column and rows are defined using 'grid-template-columns' and 'grid-template-rows'. I had 11 columns in my design with a maximum width of 1100px. To do this, I used 'grid-template-columns: repeat(11, 1fr);', meaning there will be 11 columns at 1 fraction each so that all my columns will be of equal size. The content that I had was two blocks of text and two images. To position these within the grid, I used 'grid-column' and 'grid-row' on the elements. The image below shows the code that I used to position these elements within the grid.

For example, '&__column-one-text' is set to start at column 2 and span over 4 columns and start at row 3.

Initially, I used fixed amounts for my rows and this presented an issue when positioning the child elements. When making the browser smaller to check responsiveness, the text would begin to overlap the image as the text block dropped on to more lines. To overcome this, I changed the row declaration to 'grid-auto-rows: auto' so that the rows will be defined automatically based on the content in the column. This did fix the issue, but it still does not match my design perfectly, as the amount of content in one column changes the row height and affects the other column.

To create the last section 'What can we do?', I made the element span the full width of the grid using 'grid-column: 1 / span 11;', set a max-width of 800px and then used 'margin:0 auto' to centre the block in the grid.

Making the page responsive using Grid was fairly simple. Inside breakpoints, I redeclared the values for the placement of the child elements to span the full width of the grid container to change the layout into one column.

Evaluation

Despite running into some issues, Grid proved itself to be a powerful CSS layout tool, allowing developers to create more complex layouts quite easily. In this project, I only used a small amount of CSS Grid declarations compared to the exhaustive list shown on CSS Tricks. Using Grid in this project has made me want to explore Grid further and make use of the wide range of declarations available to create more complex layouts in future projects.

With plenty of useful resources available such as A Complete Guide To Grid and Grid By Example, I found that I picked CSS Grid up quite quickly. I did run into a few issues as mentioned above, but I am pleased with the outcome of this project and I will be using Grid again in the future.

View SaveOurPlanet

Bibliography

CSS-Tricks. (2016) A Complete Guide to Grid. [Online] [Accessed on 12th March 2019] https://css-tricks.com/snippets/css/complete-guide-grid/

Andrew, R. (no date) Grid by Example. [Online] [Accessed on 12th March 2019] https://gridbyexample.com/

View More Posts