CSS Grid Is Easy

✨ Have You Ever Wondered Why Flexbox and Grid Were Introduced in CSS?
What could be the reason behind the invention of Flexbox and Grid in CSS? Why weren’t older techniques like tables, floats, or inline blocks enough?
Well, don’t worry! In this blog, I’ll give you a simple, fun, and detailed explanation of why CSS Grid was introduced, what it’s used for, and the difference between Grid and Flexbox.
🧱 Before That – Let’s Talk Layouts!
Layouts are basically the structure or format of your web page—how you arrange elements like the header, navigation bar, sidebar, content, and footer.
Types of Layouts:
✅ 1. Fixed Layout
Uses fixed widths (e.g.,
width: 960px;
)Doesn’t adapt to different screen sizes
Great for desktops, but not responsive.
✅ 2. Responsive Layout
Uses media queries and breakpoints
Adapts to different screen sizes (mobile, tablet, desktop)
✅ 3. Static Layout
Similar to fixed, but completely rigid
Elements don’t move or respond to screen size
✅ 4. Grid-Based Layout (CSS Grid)
Uses rows and columns
Ideal for complex designs like dashboards or portfolios
✅ 5. Flexbox Layout
One-dimensional: either row or column
Perfect for navbars, cards, and aligning items in one direction
You don’t need to memorize all of them—just understand that each layout has a purpose. Layouts are a core part of web design, like the skeleton to your web page.
🕰️ Life Before Flexbox & Grid
Now you know the about Layouts so lets try to understand what are the methods used before the FlexBox or the Grid.
Flexbox was introduced in 2013-2014, and CSS Grid was introduced in 2017 . So before that we used tables , then floats , positioning and inline block .
These each carry there own disadvantages that is :
Like we used for HTML tables but they are bad for structure.
Then we used floats which are meant for text-wrapping , not for the layouts etc ..
These older methods couldn’t do simple things like vertically centering elements .
These is where the FlexBox and Grid comes into the picture .
CSS Grid:
CSS Grid is a two-dimensional layout system in CSS. These means it allows you to control the layout elements in both rows and columns .
In these picture if you could observer there are numbers where 1 to 7 represents the row columns and 1 to 2 at the top represents the columns . So you can control both rows and columns in the layout using grid.
Before going further lets first understand about Grid like about its body parts like a doctor , don’t worry i am not telling you to learn Biology it’s just some terms of Grid so that we can perform operations on it .
Important CSS Grid terminology
Grid Container
The element on which display: grid
is applied. It’s the direct parent of all the grid items. In this example container
is the grid container.
<div class="container">
<div class="item item-1"> </div>
<div class="item item-2"> </div>
<div class="item item-3"> </div>
</div>
Grid Line
The dividing lines in the picture are the grid lines . They make the structure of grid . They can be either vertical (“column grid lines”) or horizontal (“row grid lines”) and reside on either side of a row or column. Here the color lines is an example of a column grid line.
Grid Track
The space between two adjacent grid lines Don’t worry i will explain these means the space between between two line either it be row lines or column lines .
Grid Area
The total space surrounded by four grid lines that is it can be any number of boxes you are selecting which eventually makes a rectangle is know as Grid Area . A grid area may be composed of any number of grid cells. Here’s the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.
Grid Item
The children (i.e. direct descendants) of the grid container. Here the item
elements are grid items, but sub-item
isn’t.
<div class="container">
<div class="item"> </div>
<div class="item">
<p class="sub-item"> </p>
</div>
<div class="item"> </div>
</div>
Grid Cell
If I have to say simply the each individual box you see in the picture is a Grid Cell.
Now you Understood the Grid Terminology , hope i explained and made easy for you to understood Grid terminology if yes, lets move to the next part which are the properties of Grid.
CSS Grid properties
Now you might be wondering what are these properties it looks way too complex . I understand your worries because i thought the same too . But you just need to know some which are widely useful and if needed in future just search it again simple right . But before that you need to know what exactly are this properties.
🔹 1. Properties for the Grid Container
These are the properties that are applied to the parent element that holds the grid.
Property | Purpose |
display: grid; or display: inline-grid; | Turns the element into a grid container. |
grid-template-columns | Defines the number and size of columns. |
grid-template-rows | Defines the number and size of rows. |
grid-template-areas | Defines named areas on the grid. |
gap or grid-gap | Sets space between rows and columns. |
row-gap and column-gap | Sets row or column gaps individually. |
justify-items | Aligns grid items horizontally within their cells. |
align-items | Aligns grid items vertically within their cells. |
place-items | Shorthand for justify-items and align-items . |
justify-content | Aligns the whole grid horizontally in the container. |
align-content | Aligns the whole grid vertically in the container. |
place-content | Shorthand for justify-content and align-content . |
grid-auto-flow | Controls how auto-placed items are inserted: row , column , or dense . |
grid-auto-rows and grid-auto-columns | Defines size for rows or columns created automatically. |
🔹 2. Properties for Grid Items
These are applied to the children of the grid container
Property | Purpose |
grid-column-start / grid-column-end | Defines where the item starts and ends horizontally. |
grid-row-start / grid-row-end | Defines where the item starts and ends vertically. |
grid-column | Shorthand for grid-column-start / grid-column-end . |
grid-row | Shorthand for grid-row-start / grid-row-end . |
grid-area | Can define placement using four values or a named area. |
justify-self | Aligns the item horizontally inside its cell. |
align-self | Aligns the item vertically inside its cell. |
place-self | Shorthand for justify-self and align-self . |
🎉 That’s a Wrap!
If you made it this far—give yourself a big virtual high five! 🙌
Now you understand the why, what, and how of CSS Grid.
More fun and easy-to-understand blogs are on the way, so don’t forget to subscribe and keep learning with me.
Subscribe to my newsletter
Read articles from Saivaishnav Ambati directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
