CSS 18 💻 Grid Layout Introduction

a - Introduction
CSS Grid is a powerful layout system introduced in CSS3
It provides a flexible way to create complex responsive designs by defining rows and columns.
It's a two-dimensional layout model 
display: grid; → Enable the element to be a grid container 
grid-template-columns: 100px 200px 100px; → Creates three columns with specific size for each one
Adding more children inside the parent with display: grid...
it will follow the rules from the grid-template-columns
grid-gap → Set gap between rows and columns

b - grid-template-columns, grid-template-rows properties
grid-template-columns → defines the number and size of columns within a grid container.
grid-template-rows → defines the number and size of rows within a grid container.
Both accept the same values
values → length values(px etc), percentage and  fraction(fr) 
fr → stands for "Fraction of Available Space"
The total available space is divided equally among all fractional units
grid-template-columns: 1fr 2fr 3fr;  →  the first column will take up one third of the available width, 
the second column will take up two thirds, 
and the third column will take up all remaining space.

c - value keywords for grid-template-columns and grid-template-rows

The values can also be keywords:
max-content → should take up the maximum possible amount of space, 
 min-content → should take up the minimum possible amount of space.
 minmax(min, max) → specifies the minimum and maximum possible dimensions for grid items.
auto → represents the range between the minimum and maximum
grid-template-columns: minmax(100px, 200px) auto;
the first column will have a minimum width of 100px and a maximum width of 200px. 
The second column will occupy any remaining available space within the grid
repeat →  creates columns and rows by repeating a pattern
repeat(3, 100px); →  creates a grid with three columns, each being exactly 100px wide

18 – Grid Layout Introduction

<div class="grid-container">
    <div class="grid-item">Grid Item 1</div>
    <div class="grid-item">Grid Item 2</div>
    <div class="grid-item">Grid Item 3</div>
    <!-- Add more grid items as needed -->
</div>

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

---

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!