Category: 5. CSS Layouts

When elements overlap, z-index decides which appears on top.

Example:

<style>
.box1 {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
  background: lightblue;
  padding: 20px;
}
.box2 {
  position: absolute;
  top: 70px;
  left: 70px;
  z-index: 2;
  background: coral;
  padding: 20px;
}
</style>

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

Practice Task:
Create a modal popup that appears above all other elements.

Units you should know:

• px – fixed pixel size
• % – percentage of parent element
• em, rem – relative to font-size
• vw, vh – viewport width and height
• fr – fractional unit used in Grid

Practice Task:
Try building the same layout using px, %, and fr to see how they behave differently.

Media queries let you adjust layouts based on screen size.

Example:

@media (max-width: 768px) {
  .grid {
grid-template-columns: 1fr;
  }
}

Practice Task:
Make your 3-column gallery responsive so that on mobile screens it becomes 1 column.

Flexbox is great for small components, Grid is great for page structure. Combining them gives the best of both.

Practice Task:
Create a page where the outer layout is made with Grid, and each section (like navbar, cards) is made with Flexbox.

Use these properties to align grid items:

• justify-items – horizontal alignment
• align-items – vertical alignment
• justify-content and align-content – align entire grid inside container

Practice Task:
Center a single box in the middle of the page using Grid.

Named grid areas allow you to create more readable layouts.

Example:

<style>
.container {
  display: grid;
  grid-template-areas:
"header header"
"sidebar main"
"footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 10px;
}
.header { grid-area: header; background: lightgreen; }
.sidebar { grid-area: sidebar; background: lightblue; }
.main { grid-area: main; background: lightcoral; }
.footer { grid-area: footer; background: lightgray; }
</style>

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

Practice Task:
Design a typical webpage layout with a header, sidebar, main content, and footer.

CSS Grid is a powerful system for 2D layouts.

Basic properties:

• display: grid – enables grid
• grid-template-columns and grid-template-rows – define grid structure
• gap – controls spacing between cells

Example:

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.item {
  background: lightblue;
  padding: 20px;
}
</style>

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Practice Task:
Create a three-column image gallery using Grid.

More useful properties:

• flex-wrap – allows items to wrap to the next line
• align-content – controls space between multiple rows
• order – changes the order of flex items

Practice Task:
Build a responsive card layout using flex-wrap so cards move to the next line on smaller screens.

Flexbox makes aligning and distributing space between items easy.

Basic properties:

• display: flex – enables flexbox
• flex-direction: row or column
• justify-content – controls horizontal alignment
• align-items – controls vertical alignment

Example:

<style>
.container {
  display: flex;
  justify-content: space-between;
  background: lightgray;
}
.item {
  background: coral;
  padding: 10px;
}
</style>

<div class="container">
  <div class="item">Box 1</div>
  <div class="item">Box 2</div>
  <div class="item">Box 3</div>
</div>

Practice Task:
Create a horizontal navigation bar using Flexbox.

The display property determines how an element behaves:

• block – takes full width, starts on a new line
• inline – takes only the space it needs, stays in the same line
• inline-block – behaves like inline but allows setting width and height
• none – hides the element

Example:

<style>
span {
  display: block;
  background: lightgreen;
  margin: 5px;
}
</style>

<span>Block 1</span>
<span>Block 2</span>

Practice Task:
Create an inline navigation menu and then switch it to block layout.