CSS Grid: A Better Layout System

Whenever I find myself working on a website, one of the more time-consuming aspects of development is often the CSS (cascading style sheet) code which controls the layout of the site. While CSS properties often have names which are self-explanatory the various formatting tools in CSS can oftentimes be confusing to me.

In the past, using the float property and various div classes to control different sections of the website was my go-to when building webpages for practice. This has since been proceeded by a number of new layout systems now baked into CSS functionalities as more recent versions of CSS have worked to better support modern web-development concepts. As I am looking to improve and modernize my web-development skills to prepare for contract work in the future, it was important that I start looking into the newer layout systems provided by CSS.

The newest layout system introduced by CSS, CSS Grid, is a fairly recent invention. I was looking for a good reference to introduce me to the idea, and I found a great resource on the website css-tricks.com (https://css-tricks.com/snippets/css/complete-guide-grid/), which focuses on providing relevant information regarding various CSS standards and techniques. The article provides a complete introduction to the idea of Grid, starting with it’s various properties (display: grid to begin using the layout, various grid-template properties and grid-column/grid-row to control the particular layout of content) and moving further to discuss more specific techniques associated with Grid. I felt that the information about defining gutters (spaces between grid items) was extremely helpful, as gutters vs. borders in web design has been a hard topic for me to wrap my head around for a while, and this page put it into a really easily-understandable format in my opinion.

CSS grid is absolutely what I would use for a modern website design if I were making a site for someone in 2020. Although there exist frameworks such as Bootstrap and Skeleton, a lot of the inner-workings of the page and its layout can be obstructed in a way, and I feel like Grid makes it easy enough to make a great layout without relying on an external framework. Keeping things simple in web-design has always made for a more manageable website in my experience. I would certainly recommend this article to anyone looking to explore CSS Grid as a layout option for a website, the plentiful examples and images make concepts easy to visualize, and the explanations provide a good level of information without seeming overwhelming to someone unfamiliar with the topic.

With CSS grid, I think web-development (in terms of front-end) has become much more accessible, and building a functional and aesthetically pleasing website has become far easier than in the past when reliance on outdated layout formats made things a lot more difficult.

Site Referenced: CSS-Tricks.com

Great resource for learning more about CSS grid!

Published by toomeymatt1515

Senior at Worcester State University currently studying for a bachelor's in computer science, with a concentration in software development.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website at WordPress.com
Get started
%d bloggers like this: