Full Stack Camp

2⃣ CSS Grid Layout

✅ What is CSS Grid?

CSS Grid is a two-dimensional layout system that allows you to control both rows and columns at the same time. Unlike Flexbox (which is one-dimensional), Grid gives you full control over the layout of your elements.
It’s especially useful for building complex web layouts without hacks like floats or flex-wrap tricks.

🔸 1. Creating a Grid Container
You start by declaring display: grid on the parent element.
.container { display: grid; }
Example:

<div class="container"> <div>1️⃣</div> <div>2️⃣</div> <div>3️⃣</div> </div>

.container { display: grid;
grid-template-columns: 100px 100px 100px; }

🔹 2. Defining Columns and Rows
Use grid-template-columns and grid-template-rows.
👉 Fixed sizes:

.container { 
      display: grid;  
       grid-template-columns: 200px 150px;
       grid-template-rows: 100px 100px; }

👉 Responsive using fr unit (fractional):

.container { display: grid; grid-template-columns: 1fr 2fr; }

👉 Repeat:

.container { display: grid; grid-template-columns: repeat(3, 1fr); }

🔸 3. Gap Between Items
Use gap, row-gap, or column-gap.
.container { gap: 20px; }

🔸 4. Placing Items in Grid
Grid items can span columns or rows using:

.item { 
      grid-column: 1 / 3; /* start at 1, end before 3 */
       grid-row: 2 / 4; }

You can also use span:
.item { grid-column: span 2; }

🔹 5. Named Areas
Use grid-template-areas for visually mapping the layout.

.container {
    display: grid; 
    grid-template-columns: 1fr 2fr; 
    grid-template-rows: auto auto; 
    grid-template-areas: "header header" "sidebar content"; }

Then assign elements:

.header { grid-area: header; }
.sidebar { grid-area: sidebar; } 
.content { grid-area: content; }

🔹 6. Aligning Items
➝justify-items: Align items horizontally (inside each grid cell).
➝align-items: Align items vertically (inside each grid cell).
➝justify-content: Align the entire grid horizontally.
➝align-content: Align the entire grid vertically.

.container { justify-items: center; align-items: center; }

🧊 7. Auto-placement
Let grid place items automatically based on available space.

.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

☝️ This is super useful for responsive grids (like image galleries or cards).

🧪 8. Complete Example – Simple Blog Layout

<style>
.container {
     display: grid;
     grid-template-areas: "header header" "sidebar main" "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
    min-height: 100vh; } 
.header { 
    grid-area: header;
    background: #1e90ff;
    color: white;
    padding: 1rem; }
.sidebar {
     grid-area: sidebar;
     background: #f0f0f0;
    padding: 1rem; }
.main {
     grid-area: main;
     background: #fff;
     padding: 1rem; }
.footer {
     grid-area: footer;
     background: #1e90ff;
     color: white;
     padding: 1rem;
     text-align: center; } 
</style> 


<div class="container">
     <div class="header">🌐 My Blog</div> 
    <div class="sidebar">📚 Categories</div>
    <div class="main">📝 Blog Content goes here</div>
   <div class="footer">© 2025 My Blog</div>
</div>

72 views06:36