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.

---

🔹 2. Properties for Grid Items

These are applied to the children of the grid container

🎉 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.