--- title: "Oops! I Grid it again" url: "https://www.bekk.christmas/post/2019/04/oops!-i-grid-it-again" authors: ["My Thao Nguyen"] published: "2019-12-04" updated: "2024-11-07T13:05:28Z" language: "en-US" type: "article" tags: ["CSS"] --- # Oops! I Grid it again It’s been six months since I’ve been introduced to CSS Grid and I just can't stop sharing how useful it is! It’s amazing when you’re in the need of a responsive layout! ## In short CSS Grid is a two-dimensional layout system for building responsive page structures with rows and columns. It covers the basics of defining grids, placing items with grid lines or grid areas, and shows how Grid can simplify markup and spacing compared with deeply nested Flexbox layouts. - **For:** Frontend developers working with CSS layouts - **Good to know beforehand:** Basic CSS knowledge and familiarity with Flexbox _AI-generated_ So what is CSS Grid all about? Unlike Flexbox which was made for placing items in a single row or column, Grid can be called a 2-dimensional layout system that lets you place items across a number of rows and columns! Well, it sounds interesting enough! But how do you use it? ## How to Grid Grid is used like Flexbox by setting the container with `display: grid`. Then you got to define how many rows and columns you want your grid to have with `grid-template-columns` and `grid-template-rows`. For instance: ![Defining you grid example](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/beb9d5848a061c8ba691236d6c17e5442e4d6484-1826x764.png) In this example, I have used `1fr` (which stands for _fraction_) - to split the total space in the grid into three columns. This can also be written in a simpler way, by using `repeat(3, 1fr)` - which basically means repeat this column or row three times with the size of 1 fraction each. After defining your columns and rows, you can decide whether to position your items by using _grid lines_ or _grid tracks_. The numbers in the image below defines the grid lines for columns and rows, while tracks is the any group of cells. ![grid lines vs grid tracks](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/b498cb60f67849fd02f40b48b8a0c556ddf436db-1164x794.png) With grid-lines, you place each item by defining from which column/row line to which column/row line you want your item stretch. For instance, if I want my `.header` item to stretch from the first grid line to the last grid line I could use: `grid-column-start: 1` and `grid-column-end: 4`. However, I can also use a shorthand like `grid-column: 1/4` . So instead of two codelines, you could use just one! Check out the example below: To use grid tracks, you first have to define your `grid-template-areas` by naming each cell. Then tell your grid item which cell(s) it should cover with just one line, `grid-area: header`. I prefer this method as it is less code and easier to remember the cell names rather than the grid lines 😊. If the placement of your grid items is not defined then all direct children of the container will automatically be placed inside of each cell in the grid. Simple, right? ✨ ## What is good about Grid? Grid really shines when it comes to dividing your web page into different parts without letting your markup suffer! Imagine going from having a layout with loads of nested flexboxes: ![Pure Flexbox layout example](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/724e0ce57b90ab4cfe2045347c6620f6a97d5c38-1022x636.png) To this simple pure grid markup: ![Pure Grid layout example](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/c27a613c5036733d7ad0e3069c58711caeea31d0-938x366.png) Not only does a pure flexbox layout require nested divs, but it also require more CSS to get padding or margin between each flex item to add spacing between your items. With Grid you can simply use `grid-gap`. 💁 Of course, Grid is not here to replace Flexbox, but rather allow you to write concise and more semantically correct code! So instead of drowning in infinite nested flex boxer, how about you start using a combination of both Grid and Flexbox? You will definitiely reap of the results! ☺️ ✨ ## Relevant resources recommended by the author - [The Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/ ) - [Does Grid replace Flex?](https://css-tricks.com/css-grid-replace-flexbox/) - [Auto-sizing columns using auto-fill vs auto-fit](https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/) - [Grid examples](https://gridbyexample.com/examples/)