Improving With CSS Grid And Online Communication
CSS grid layout or CSS grid is a technique in Cascading Style Sheets that allows web developers to create complex responsive web design layouts more easily and consistently across browsers.[1] There have been other methods for controlling web page layout methods, such as tables, the box model, and CSS flex box. CSS grid is currently not an official standard (it is a W3C Candidate Recommendation) although it has been adopted by most major browsers.[2]
Wikipedia, CSS Grid Layout
CSS Grid is one of the most important functions in building a responsive website. With the vast variety of screen sizes, it is presidents to have a website that will flow depending on the device being used whether it is a watch, fridge, phone, tablet, computer, or car display. The list of devices that are used to browse the web is ever-growing and so should our skills.
The UK SEO Service HOBO has a great article on the most used screen sizes today. The visual presentation is the first step in communication online. If the audience is unable to easily view your site or if the layout is chaotic then you have virtually no chance to get your message across. Another important aspect when it comes to creating a website is understanding your audience. Some audiences will have an easier time navigating a detailed website than that of others. The Pew Research Center has a great article detailing the wide variety of individuals on the web and the growing diversity of screen sizes. If you compare your phone with a friend you will likely find they have a completely different screen size. Better yet count how many screens of different sizes you own that are able to view the internet. In my house alone I have over nine screens that could be used to view a website. Overall it is unprecedented that any website is built with a flexible layout that is able to shift depending on the screen size and resolution. Currently, the leading screen widths are 360px, 1366px, and 1920px. (Mobile, Desktop, & Tablet)
Learning Grid
Now that you understand the importance of creating a fluid website layout, how do you create one? While there are multiple ways to create a fluid layout in CSS we will be focusing on CSS Grid, a newer addition to the CSS world and the web. There are plenty of resources available to dive into the grid world. Below I have created a chart with a few of my favorite introductory materials and what they have to offer.
| Grid Garden | A fun interactive game where you use Grid code to grow and water a garden. While it does not cover every aspect of Grid it does go over the basics and is even a great source for quick review. |
| Grid Cheat Sheet | This site provides a quick reference guide of Grid code. If you know how to use the code but have not touched it in a long time it is great to have an easy reference to turn to. |
| Mozilla MDN | For an in-depth guide to all things not only Grid but also web design and development in general. |
| User-Agent Switcher for Chrome | An excellent application for testing screen sizes for multiple devices as you develop a website. |
Simply put the CSS Grid provides a grid-based layout with rows and columns allowing for easy design of a website without the use of floats and positioning. Currently, Grid is supported by all modern browsers. Spaces can be designated between each row and/or column. An element of a website can span multiple columns and/or rows depending on the desired layout. “The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension – either a row or a column. Grid was designed for two-dimensional layout – rows, and columns at the same time. The two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with Grid.” – MDN Web Docs
If reading documentation is not your cup of tea you can find plenty of content available on Youtube to learn more about CSS Grid.
Nice Post!
You make a great point about different screen sizes. I think that is crazy how something looks one way on my phone, another way on my tablet, and a different way on my computer. Technology is just amazing, isn’t it?
Your post kind of reminds me of when my nephew shows me something on a website on his phone, and then I will pull it up on my computer or tablet. Same thing, but totally different visually.
You also make a fantastic point about how you have to make sure your website is clear to get your message to your audience. If you make things harder for your audience, your message is going to get lost. You will also lose your audience to other websites where they can get your information quickly and more clearly.
I came into your article knowing very little about CSS. I mean, I still know very little, but now I know a little more about CSS Grid. You did a good job at breaking down what it is and why it’s important. As a newbie, I appreciate you providing resources, both written and video. You included a lot of a good content for those just starting out. Great post!
This article actually helped me understand css grid a bit more. I can not a coder. So this part of the class hasn’t be the easiest. I completed the exercise on code academy, but I didn’t fully understand it. Yet, your visuals sparked that extra bit of epiphany needed to better understand why css grid is used.
Thank You