Full Stack Camp

🎨 Week 2 Day 1: Introduction to CSS (Cascading Style Sheets)

💡 Topic:
What is CSS? Why It Matters, How It Works. 
🎯 Goal:
➡️Understand the basics of CSS, 
➡️how to apply styles to HTML,
➡️ and try your first styles. 

🌍 Welcome Back to Fullstack Summer Camp!
You survived HTML week — now let’s make those plain web pages look awesome using CSS! 

Imagine HTML as building a house: walls, rooms, and windows. CSS is painting, decorating, adding curtains, choosing colors, shapes, and sizes. 

✅ 1️⃣ What is CSS? 

CSS stands for  Cascading Style Sheets. 
It’s a language that tells the browser how things should look on a web page. > 
HTML = Structure > 
CSS = Style / Design
Example:

<p>This is a paragraph.</p>

Without CSS → Looks plain.
With CSS → You can change:
➤Color
➤Font
➤Size
➤Spacing
➤Borders
➤Background

✅ 2️⃣ How to Add CSS to HTML
There are 3 main ways:
a) Inline CSS (inside an HTML tag)

<p style="color: red;">Hello!</p>

👉 Used for very small, one-time changes. Not recommended for full websites.

b) Internal CSS (inside <style> in the HTML file)

<!DOCTYPE html> <html> <head> <style> p { color: blue; font-size: 20px; } </style> </head> <body> <p>This is blue text!</p> </body> </html>

👉 Good for small projects. Easy for practice.
c) External CSS (linked as a separate file)
HTML file:

<link rel="stylesheet" href="style.css">

style.css file:

p { color: green; }

👉 Best practice for real websites. Keeps things organized!

✅ 3️⃣ CSS Selectors: How CSS Targets HTML
Basic Rule Format:

selector { 
        property: value; 
}

Selector → Which element (like p, h1, or a class)
Property → What to change (like color, size)
Value → How you want it (red, 20px)

We can:
➤select by type/element:
P, h1, h3, img , span ....

p {
color: blue;}

➤select by class
We use " . "before the name of the class.
Html➺

<p class="highlight">Don't forget this</p>

css➺

.highlight {
background-color:yellow;}

➤select by ID
We use "#" before ID name

Html➺

<button id="main">click</button>

css➺

#main {
background-color: green;}

➤you can also target elements that are inside (nested)
➺Html

<div>
<h2>Menu Today</h2>
<p>We have coffee and tea.</p>
</div>
<h2>Thank You</h2>

➺Css

div h2 {
color: orange;
}

✅ 4️⃣ Common Properties with Examples
1. Color

h1 { color: purple; }

2. Background Color

body { background-color: lightgray; }

3. Font Size

p { font-size: 18px; }

4. Font Family

p { font-family: Arial, sans-serif; }

5. Text Align

h2 { text-align: center; }

6. Width and Height

div { width: 300px; height: 150px; background-color: yellow; }

7. Border

p { border: 2px solid black; }

8. Padding (space inside element) and Margin(space outside element)

div { padding: 20px; margin: 30px; }

9. border-radius:
Rounds corners

img {
border-radius: 10px; }

10. box-shadow:
Adds shadow around boxes

div {
box-shadow: 2px 2px 8px gray; }

11. opacity:
Makes things transparent

img {
opacity: 0.8; }

12. cursor:
Changes mouse cursor

button {
cursor: pointer; }

13. text-decoration: (underline)

a {
text-decoration: none; }

14. display:
Controls layout

div {
display : block; }
span {
display: inline; }

15.position:
Controls exact placement

div {
    position: absolute;
    top: 10px;
    left: 20px; }

✅ 5️⃣ Combining Multiple Properties

p { color: white; background-color: black; font-size: 20px; text-align: justify; }

✅ 6️⃣ Real Life Analogy
Think of CSS as designing your injera restaurant menu:
The structure is the menu paper (HTML)
The font color, layout, and sizes are CSS.
When someone looks at it, they notice the style first!

✅ 7⃣ Summary
✔️ CSS = Design and Style
✔️ 3 Ways to add CSS (Inline, Internal, External)
✔️ Use selectors + properties
✔️ Common styles: color, background, font-size, width, border

#Week2 #Day1 #Css #introductionCss #lesson

83 viewsedited 15:14

68 views15:15

Assignment:
Adding css➤
https://youtu.be/uzF1Doc3cZQ?si=wpeZYkJgrjEoiLMI
Fonts
➤https://youtu.be/MnyCbILmtOY?si=SJc39ucr29EYGwyr
Colors
➤https://youtu.be/LwbKb2J8iy8?si=dS_qmuBZF5Y7i596
Borders
➤https://youtu.be/pkNdQ7TmxIw?si=EyfEaWAV8fiqW_5d
Margin
➤https://youtu.be/rBWA_t-KnKk?si=0v65S6nUwXrmhF6V
Display
➤https://youtu.be/9T8uxp5hQ60?si=bXQ_P7Z55Yodre9Y

#Week2 #Day1 #Css #introductionCss #resources

YouTube

Get started with CSS in 8 minutes! 🎨

#CSS #tutorial #course

CSS tutorial example explained inline internal external

00:00:00 introduction
00:00:26 inline
00:01:46 internal
00:03:05 external
00:04:27 id
00:05:26 class
00:06:29 linking more than 1 document
00:07:40 conclusion

74 viewsedited 15:15

Full Stack Camp

💪 Week 2 Day 1 Challenges: Css

Today’s task isn’t about writing a new HTML page —
Instead, we’ll go back to all the HTML files we already created (restaurant page, bookstore, scholarship form, cover page...) and add CSS styles using what we learned so far!
✅ What to do:
1️⃣ Open all your old HTML pages.
2️⃣ Apply as many CSS styles as possible:
➺Colors
➺Font sizes
➺Borders
➺Backgrounds
➺Padding and margins
➺Div layout and positioning
➺Media elements (images/videos) styling
3️⃣ Use external or internal CSS (not inline only!).
4️⃣ Make them clean, readable, and stylish.
✅ Reminder:
Use all methods we learned — even the selectors like:
div p {} or ul li {} or classes and IDs.

🔥 When You Finish:

➤ Share screenshots or code samples in the group.
➤ Invite your friends to join and learn with us.
➤ ✌️Stay well and keep practicing!

#Week2 #Day1 #Css #introductionCss #challenge

82 viewsedited 15:16

Full Stack Camp

📚 Week 2 Day 2: CSS Intermediate — Layout, Selectors, and Rules

🎯 Topics for Today:
1️⃣ Pseudo Classes and Elements
2️⃣ Sibling Combinators: ., >, +, ~
3️⃣ Box Model Deep Dive
4️⃣ Margin, Border, Padding — Full Control
5️⃣ CSS Conflicts: Cascading, Source, Specificity, Inheritance

✅ 1️⃣ Pseudo Classes and Elements
➤ What Are They?
They target specific states or parts of elements.
✨ Pseudo Classes Examples:
➡️ :hover
→ When mouse is over.
➝Imagine a button in an app , when you hover your mouse over it , the color changes.

button:hover { background-color: yellow; }

➡️ :focus → When an input is active/selected.

input:focus { 
        border-color: blue; }

➡️ :first-child → First element inside parent.

ul li:first-child { color: red; }

➡️ :nth-child(2) → Second child.

p:nth-child(2) { font-weight: bold; }

✨ Pseudo Elements Examples:
➝they are used when you want to add decoration with out changing the html

➡️ ::before

p::before {
      content: "👉 "; }

➡️ ::after

p::after { content: " ✅"; }

➡️ ::first-letter

p::first-letter { font-size: 30px; }

✅ 2️⃣ Sibling Combinators in CSS
➤ Why Use Them?
To style elements based on their position relative to others. This helps you control exactly where and when styles apply.

✔️ Examples:
➡️ .class1 .class2 {} — Any .class2 inside .class1.

div p { 
     color: green; }

➡️ > (Child Selector)

div > p { color: blue; }

Only selects direct children, not grand children 😁

➡️ + (Adjacent Sibling Selector)

h1 + p { color: orange; }

Selects the very next <p> after <h1>.

➡️ ~ (General Sibling Selector)

h1 ~ p { color: purple; }

Selects all following siblings.

✅ 3️⃣ Box Model Deep Dive

All HTML elements have:
➝Content = what's written/shown
→ Padding = space inside box , around content
→ Border = the edge of the box
→ Margin = space outside the box , around other boxes
➤ Display Types
✔️ display: block;
✔️ display: inline;
✔️ display: inline-block;
✅ Example:

span { display: block; }

➤ Box Sizing
✔️ box-sizing: content-box; (default , width doesn't include padding or border)
✔️ box-sizing: border-box; (includes padding + border)
✅ Example:

div { width: 200px; padding: 20px; box-sizing: border-box; }

✅ 4️⃣ Margin, Border, Padding — Sides
You can control:
margin-top
margin-bottom
margin-left
margin-right
✅ Example:

div { 
    margin-top: 20px;
    margin-right: 10px;
    border: 2px solid black;
    padding: 15px; }

Or shorthand:

margin: 20px 10px 15px 5px; /* Top, Right, Bottom, Left */

✅ 5️⃣ CSS Conflicts: Cascading, Source, Specificity, Inheritance

When two styles target the same thing, which one wins?

➤ Cascading Order
Inline styles (strongest)
Internal CSS (in <style> tags)
External CSS (weakest)

➤ Specificity
More specific selectors override simpler ones.
3⃣type selectors(p, img, div)==weak
2⃣class selectors(.highleight, .topic)==stronger
1⃣ID selectors (#main, #sec)==Strongest

➤ Source Order
The last rule in the CSS file usually wins if specificity is equal.
➤ Inheritance
Some properties like color, font-family, line-height inherit from parent.
But layout properties like margin, padding , border don’t.

✅ 6️⃣ Quick Summary Checklist
✔️ Pseudo Classes = :hover, :first-child, :nth-child()
✔️ Pseudo Elements = ::before, ::after
✔️ Sibling Selectors = >, +, ~
✔️ Box Model = Padding, Border, Margin
✔️ CSS Conflicts = Understand specificity, cascade, inheritance

#Week2 #Day2 #Css #CssLayout #lesson

72 viewsedited 06:48

Full Stack Camp

Assignment :
➤pseudo classes
https://youtu.be/Nrsy_2ogRfQ?si=dKtM_vb_cLt_JM8Q
➤pseudo elements
https://youtu.be/_LxYNxeWpBo?si=KlUEPdiRLDa0jpoY
➤nav-bar
https://youtu.be/f3uCSh6LIY0?si=44Yh4TVl8IB19ybn

#Week2 #Day2 #Css #CssLayout #resources

YouTube

Learn CSS pseudo-classes in 7 minutes! ☟

#css #course #tutorial

CSS pseudo classes hover link active tutorial example explained

75 viewsedited 06:49

Full Stack Camp

🎨Week 2 Day 2 Challenges:

💻 Today’s CSS Styling Challenge!
From all the HTML projects we did before —
✅ Cover Page
✅ Restaurant Website
✅ Bookstore Catalog
✅ Scholarship Application Form

👉 Now it’s time to make them look beautiful using today’s CSS lessons!
🔧 What to Include:

✨ 🎯 Style all lists and menus → Add background colors, borders, padding, spacing!

✨ 🎯 Use Flexbox to arrange sections → Menus, book items, form fields neatly side by side or centered.

✨ 🎯 Add borders, margins, and boxes → Around each important section (like menus, profile pictures, buttons).

✨ 🎯 Apply hover effects → Change button colors, link styles when someone moves their mouse over them.

✨ 🎯 Use pseudo-elements like ::before and ::after for decoration!

✨ 🎯 Try sibling combinators → Arrange things depending on position (like styling every <p> after <h1>).

✨ 🎯 Control the box model → Use margin, padding, width, and height smartly.

🌟 💡 Bonus Reminder: Use even the tags or methods we might have forgotten to mention before.
👉 Be creative — mix colors, shapes, and layouts!
📸 ✅ When You’re Done:
➤ Share screenshots or the code in the group!
➤ Invite your friends to join Fullstack Summer Camp 💻🔥
➤✌️ Stay well, enjoy your styling, and see you tomorrow! ✨

#Week2 #Day2 #Css #CssLayout #challenge

85 viewsedited 06:50

Full Stack Camp

📚 WEEK 2 DAY 3: CSS DEEP STYLING

🎨 Topic: Backgrounds, CSS Units, Replaced Elements

============================================

✅ 1️⃣ BACKGROUND PROPERTIES IN CSS

👉 Why background matters: It sets the mood and layout of your web page.
Think of it like painting your restaurant walls, putting posters up, or setting up banners.

------------------------------------------
🔸 1.1 background-image:
Adds an image as a background.
Example:

body {
background-image: url("coffee.jpg");
}

🔸 1.2 background-repeat:
Controls if and how the image repeats.

Options: repeat, no-repeat, repeat-x, repeat-y.
Example:

div {
background-image: url("pattern.png");
background-repeat: no-repeat;
}

🔸 1.3 background-size:
Controls image size in the background.

Options:
- auto
- cover (fills the whole area)
- contain (makes sure the full image shows)

Example:

div {
background-image: url("sunset.jpg");
background-size: cover;
}

🔸 1.4 background-position:
Where the background starts from.
Example:

div {
background-position: center center;
}

🔸 1.5 background-attachment:
Controls scrolling behavior.

- scroll (default)
- fixed (image stays while content scrolls)
Example:

body {
background-image: url("forest.jpg");
background-attachment: fixed;
}

🔸 1.6 background-gradient:
Uses two or more colors as background without images.
Examples:

div {
background: linear-gradient(to right, red, blue);
}

div {
background: radial-gradient(circle, yellow, green, blue);
}

=====================================

✅ 2️⃣ CSS UNITS + MEASUREMENTS

Units help make things the right size.

🔸 2.1 px: Pixels
- Fixed unit. Small screens might look too big/small. It is not responsive.
Example:

p {
font-size: 16px;
}

🔸 2.2 em: Relative to parent element
Example:

div {
font-size: 1.5em;
}

🔸 2.3 rem: Relative to root element
- Keeps sizes consistent across page.
Example:

body {
font-size: 16px;
}

h1 {
font-size: 2rem;
}

🔸 2.4 % (Percentage)
Width or height relative to parent.
Example:

div {
width: 50%;
}

🔸 2.5 vh & vw (Viewport height/width)

- 1vh = 1% of viewport height.
- 1vw = 1% of viewport width.
Example:

section {
height: 100vh;
width: 100vw;
}

🔸 2.6 min-width / max-width
Limits size changes.
Example:

img {
max-width: 100%;
min-width: 200px;
}

🔸 2.7 overflow
Controls content that goes outside the box.

Options:
- visible
- hidden
- scroll
- auto
Example:

div {
width: 200px;
height: 200px;
overflow: scroll;
}

🔸 2.8 object-fit
Applies to <img>, <video>, etc.
Options: cover, contain, fill, none.
Example:

img {
width: 100%;
height: 300px;
object-fit: cover;
}

------------------------------------------

🔸 2.9 COLORS (FUNCTIONS + SYSTEMS)

✅ rgb():
color: rgb(255, 0, 0);

✅ rgba(): (With transparency)
color: rgba(255, 0, 0, 0.5);

✅ hsl(): (Hue, Saturation, Lightness)
color: hsl(120, 100%, 50%);

✅ hsla():
color: hsla(120, 100%, 50%, 0.3);

✅ hwb(), lab(), lch():
Advanced color systems for modern browsers. Mostly for professional design systems.

===============================

✅ 3️⃣ REPLACED ELEMENTS: Styling

Replaced elements = Content controlled by the browser but styled by CSS.
Examples:
- <img>
- <video>
- <input>
- <iframe>
- <table>

🔸 3.1 Styling Images

img {
width: 100%;
max-width: 400px;
border: 2px solid black;
border-radius: 15px;
object-fit: cover;
}

🔸 3.2 Styling Videos

video {
max-width: 600px;
border: 4px solid red;
border-radius: 10px;
}

🔸 3.3 Styling Forms (Inputs, Buttons)

input, select, textarea {
padding: 12px;
margin: 10px 0;
border: 1px solid #ccc;
width: 100%;
}

button {
background: linear-gradient(to right, green, blue);
padding: 15px 30px;
color: white;
border: none;
border-radius: 8px;
}

button:hover {
background: linear-gradient(to right, blue, purple);
}

71 viewsedited 10:06

Full Stack Camp

🔸 3.4 Styling Tables

table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}

===============================

✅ EXTRA TIPS:

- Combine background properties into one shorthand:
background: url("bg.jpg") no-repeat center/cover fixed;

- Mix units smartly:
- rem for font sizes
- px for borders
- vh/vw for layout

✅ QUICK SUMMARY:

✔️ Background images, gradients, sizes, positions.
✔️ CSS units like px, em, rem, %, vh, vw.
✔️ Overflow and object-fit.
✔️ Advanced color functions (rgb, rgba, hsl, hsla).
✔️ Styling images, forms, media, tables (Replaced Elements).

68 views10:06

Full Stack Camp

Assignment :
➤background-image
https://youtu.be/_oFWg_NlKdo?si=KwFKAy_8T0FaNona
➤overflow
https://youtu.be/d7cH8geV2dY?si=SMddhWXTINpRH0b3
➤position
https://youtu.be/G4AWXOr4W-k?si=feeSgnv8xS8r1uZD

YouTube

How to include a CSS background image 🏙️

#CSS #tutorial #course

CSS background image tutorial example explained

body{
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}

69 views10:06

Full Stack Camp

🔥Week 2 Day 3 Challenges:

💻 TODAY'S CHALLENGE: BUILD YOUR OWN COURSE WEBSITE HOMEPAGE! 💻🔥

👋 Hello Fullstack Summer Camp friends!

Today’s challenge is a fun and practical one — we’re moving beyond random layouts and actually trying to imitate a real website layout.
Our inspiration? 👉 [https://www.muyalogy.com](https://www.muyalogy.com)

━━━━━━━━━━━━━━━━━━━
🎯 YOUR MISSION:

✅ Build a homepage for an online learning website using ONLY HTML + CSS (NO JavaScript yet).

✅ The homepage should include:

1️⃣ Website title/logo at the top (you can write just the name as text)
2️⃣ A navigation bar with items like:
   - Home
   - Courses
   - About
   - Contact

3️⃣ 2–3 Courses Section:
   ➤ Each course should have:
      - Course title
      - Short description
      - Image
      - Price or rating

4️⃣ Footer section:
   ➤ Include things like copyright,
   ➤ Terms and conditions,
   ➤ Social media icons or text links (as placeholders).

✅ Use as many CSS styles as possible from everything we’ve learned so far:
- Background images or gradients
- Pseudo-classes (like hover effects on buttons or links)
- Tables (if you wish for price comparison or schedule)
- Flex or Grid layout for neat alignment
- Colors, margins, paddings, fonts, etc.

━━━━━━━━━━━━━━━━━━━
👀 Extra Notes:
👉 You don't need to copy everything from the real site. Just the general layout and feel.
👉 You can get creative with colors and images that fit the education theme!

━━━━━━━━━━━━━━━━━━━
📸 When You’re Done:
➤ Share your finished homepage in the group! Screenshots or code files — both are welcome.
➤ Invite your friends who want to learn with us.
➤ Stay consistent, stay practicing, and as always...
✌️Stay well and happy coding!

Muyalogy

An innovative full-service learning platform that offers a comprehensive suite of online courses in a number of different areas.

76 viewsedited 10:07

Full Stack Camp

📚WEEK 2 DAY 4: CSS FLEXBOX &*Grid layouts

👋👋 Fullstack Campers! Let's dive in to flexboxes and Grid layouts today.

1⃣ CSS Flexbox – The Ultimate Beginner-to-Intermediate Guide

Flexbox (Flexible Box Layout) is used to arrange items in a row or column and control their alignment, spacing, and distribution—even when their sizes are unknown or dynamic.

🧱 1. Setting Up Flexbox
To use Flexbox, apply display: flex; to a container. This makes its direct children flexible items.

<div class="container">
      <div>Item 1</div>
      <div>Item 2</div> 
     <div>Item 3</div>
</div>

Css:

.container { display: flex; }

➕ 2. Flex Container Properties
These properties are applied to the parent element.
🔸 flex-direction
Controls the main axis direction.

.container { 
     display: flex;
      flex-direction: row;
      flex-direction: column; 
      flex-direction: row-reverse; 
      flex-direction: column-reverse; }

📦 Example

.container { display: flex; flex-direction: column; }

This stacks items vertically.
🔸 justify-content
Aligns items along the main axis (left to right by default).

.container { 
      justify-content: flex-start; 
      justify-content: flex-end;  
      justify-content: center;    
      justify-content: space-between; 
      justify-content: space-around;  
      justify-content: space-evenly; }

📦 Example:

.container { display: flex; justify-content: space-between; }

🔸 align-items
Aligns items vertically (along the cross-axis).

.container {
       align-items: stretch; 
       align-items: flex-start;
       align-items: flex-end;
       align-items: center;
       align-items: baseline; }

📦 Example:

.container { display: flex; align-items: center; }

🔸 flex-wrap
By default, items will try to fit in one line. Use wrap to move overflowing items to a new line
➤

 nowrap/* default */ 
   ➤ wrap
   ➤ wrap-reverse

🔸 align-content
Used only when there are multiple lines (i.e. when flex-wrap: wrap; is applied). It aligns the rows of items.

➤

stretch;
➤ flex-start
➤ flex-end
➤center
➤ space-between
➤ space-around

🧊 3. Flex Item Properties
These are applied to individual child elements inside a flex container.
🔹 flex-grow
Defines how much a flex item can grow relative to others.

.item { flex-grow: 1; /* Will grow equally with others */ }
📦 Example:

.item1 { flex-grow: 1; } 
.item2 { flex-grow: 2; }

Item 2 will be twice as wide as Item 1.

🔹 flex-shrink
Defines how much an item can shrink if space is tight.

.item { flex-shrink: 0; /* Won't shrink */ }

🔹 flex-basis
Defines the initial size before space is distributed.

.item { flex-basis: 200px; }

🔹 flex
A shorthand for:
flex: grow shrink basis;
📦 Example:

.item { flex: 1 1 200px; }

🔹 align-self
Overrides align-items for a single item.
.item { align-self: center; }

🧪 4. Complete Example

<style> .container { 
       display: flex;
       flex-direction: row;
       justify-content: space-around;
      align-items: center;
      height: 200px;
      background-color: #f2f2f2; } 
.item { 
     background: orange;
     padding: 20px;
     color: white;
      margin: 10px;
      flex: 1; } </style>

<div class="container">
      <div class="item">📘 Item 1</div>
     <div class="item">📙 Item 2</div>
     <div class="item">📗 Item 3</div>
</div>

🛠 5. Flexbox Tricks You Should Know
🔹 Equal height columns
🔹 Center anything (vertical + horizontal)
🔹 Responsive layout (great on mobile! Coming soon)
🔹 Reordering items with order
🔹 Avoids using floats or positioning

78 viewsedited 06:34

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

About

Blog

Apps

Platform