• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Website Layout

← Previous Next →

🔹 What is a CSS Website Layout?

A CSS website layout defines the visual structure and organization of a webpage. It determines how headers, navigation bars, sidebars, content areas, and footers are positioned and styled.

You can build layouts using techniques such as:

  • CSS Flexbox

  • CSS Grid

  • float and clear

  • Positioning (relative, absolute, etc.)

  • Multi-column layouts

🔸 Common Layout Components

  1. Header – Top bar with logo or site name

  2. Navigation (Nav) – Menu links

  3. Main Content – Central section for page content

  4. Sidebar – Optional for ads, links, or tools

  5. Footer – Bottom section with copyright/info

🔸 Layout Methods

✅ 1. Flexbox Layout
.container {
  display: flex;
}
.sidebar {
  width: 25%;
}
.content {
  width: 75%;
}

Use Flexbox for 1D layouts (row or column).

✅ 2. Grid Layout
.container {
  display: grid;
  grid-template-columns: 25% 75%;
}

Use Grid for 2D layouts — rows and columns.

✅ 3. Float-Based Layout
.sidebar {
  float: left;
  width: 25%;
}
.content {
  float: left;
  width: 75%;
}

Floats are older technique, still useful sometimes.

✅ 4. Position-Based Layout
.header {
  position: fixed;
  top: 0;
  width: 100%;
}

Used for sticky headers, footers, etc.

✅ 5. Multi-Column Layout
.columns {
  column-count: 3;
  column-gap: 20px;
}

Useful for text-heavy pages like blogs.

Practice Questions

Q1. Create a basic two-column layout using Flexbox.

Q2. Build a 3-column layout with Grid (left, center, right).

Q3. Create a header and footer with fixed width.

Q4. Make a responsive sidebar that collapses on small screens.

Q5. Float an image to the right of the content block.

Q6. Create a sticky header that stays at the top on scroll.

Q7. Design a footer that sticks to the bottom of the page.

Q8. Create equal-height columns using Flexbox.

Q9. Build a centered layout with max width of 1200px.

Q10. Use column-count to split text into 2 columns.

CSS Website Layout Quiz

Q1: Which CSS layout method is best for 2D layouts?

A. Flexbox
B. Grid
C. Float
D. Inline-block

Q2: What does display: flex; do?

A. Converts container to a flex container
B. Applies grid layout
C. Floats all elements
D. Hides the element

Q3: Which property is used to make a sticky header?

A. position: absolute;
B. position: fixed;
C. display: block;
D. float: top;

Q4: What does grid-template-columns: 1fr 2fr; do?

A. Makes two columns of equal width
B. First column 1 part, second column 2 parts
C. Defines grid rows
D. Applies Flexbox

Q5: Which layout method allows wrapping content to the next line?

A. Flexbox with flex-wrap: wrap;
B. Float
C. Grid
D. Inline

Q6: Which layout method is oldest and now less preferred?

A. Float
B. Flexbox
C. Grid
D. Positioning

Q7: How do you define three columns with equal width in Grid?

A. grid-columns: 3;
B. grid-template-columns: 1fr 1fr 1fr;
C. display: flex;
D. columns: 3;

Q8: What is the default direction of Flexbox?

A. Row (horizontal)
B. Column (vertical)
C. Diagonal
D. Centered

Q9: What does column-count: 3; do?

A. Divides layout into 3 divs
B. Splits text into 3 columns
C. Adds 3 borders
D. Adds 3 rows

Q10: What unit is best for responsive widths?

A. % or fr
B. px
C. pt
D. em
← Previous Next →
Login
Go Back Top