CSS Exam 3: Advanced Layout - 13 Exercises

Exercise 1 CSS Grid Basics

Create a grid with the following specs:

Make the container (.grid-container) display as a grid (display: grid).
Split the grid into 3 equal columns (1fr 1fr 1fr).
Add a 20px gap between columns and rows.

Solution

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* or repeat(3, 1fr) */
    gap: 20px;
}

Exercise 2 Grid Placement

Control the placement of items:

Make (.item1) span from column 1 to column 3 (two columns wide).
Make (.item2) span two full rows.

Solution

.item1 {
    grid-column: 1 / 3; /* or span 2 */
}

.item2 {
    grid-row: span 2;
}

Exercise 3 Grid Areas

Use `grid-template-areas` to lay out a page:

Define the areas: header, sidebar, main, footer.
Make the header and footer span full width.
Place the sidebar on the left and main on the right.

Solution

.container {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Exercise 4 Media Queries

Make the layout responsive:

By default, set the page background to white.
When the screen is below 768px (mobile), set a light blue background.
When the screen is wider than 1200px, set the font size to 20px.

Solution

body {
    background-color: white;
}

@media (max-width: 768px) {
    body {
        background-color: lightblue;
    }
}

@media (min-width: 1200px) {
    body {
        font-size: 20px;
    }
}

Exercise 5 Advanced Flexbox (Order & Grow)

Control order and size of flex items:

Make (.item-last) appear first (visual order).
Make (.item-grow) fill the remaining space (flex-grow: 1).

Solution

.item-last {
    order: -1;
}

.item-grow {
    flex-grow: 1;
}

Exercise 6 Responsive Images

Make the image adapt to its container:

Set max-width to 100% so it doesn't overflow.
Set height to auto to preserve aspect ratio.
Use object-fit: cover to fill a fixed-size square without distortion.

Solution

img {
    max-width: 100%;
    height: auto;
}

.profile-pic {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

Exercise 7 Card Layout

Create a responsive card grid:

Use Grid with auto-fit repeating columns.
Set a minimum column width of 250px and max of 1fr (minmax).
This ensures cards wrap automatically based on screen size.

Solution

.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

Exercise 8 Responsive Element Visibility

Control element visibility by device:

Hide the sidebar (.sidebar) on mobile screens (under 600px).
Show the menu button (.menu-btn) only on mobile (hide it on large screens).

Solution

/* Hide sidebar on mobile */
@media (max-width: 600px) {
    .sidebar { display: none; }
}

/* Hide menu button on large screens */
.menu-btn { display: none; }

/* Show menu button on mobile */
@media (max-width: 600px) {
    .menu-btn { display: block; }
}

Exercise 9 Grid Alignment

Align grid content:

Center the grid itself horizontally (justify-content: center).
Center items within their cells vertically (align-items: center).

Solution

.grid-container {
    display: grid;
    justify-content: center; /* align the grid */
    align-items: center; /* align items within cells */
}

Exercise 10 Mixed Layout (Flex inside Grid)

Combine both techniques:

You have a card (.card) that is a Grid item.
Make the card content use Flexbox to space title and button apart (space-between) in a column.

Solution

.card {
    /* This element is a Grid item, but a Flex parent for its content */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

Exercise 11 CSS Filters Intermediate

Use CSS filters for visual effects:

Add a blur effect of 5px to an image.
Make the image grayscale at 100%.
Add brightness 150% on hover.
Combine multiple filters (blur + brightness + contrast).

Solution

/* Blur effect */
.blur-image {
    filter: blur(5px);
}

/* Grayscale */
.grayscale-image {
    filter: grayscale(100%);
}

/* Brightness on hover */
.bright-on-hover {
    transition: filter 0.3s ease;
}

.bright-on-hover:hover {
    filter: brightness(150%);
}

/* Combine multiple filters */
.multi-filter {
    filter: blur(2px) brightness(120%) contrast(110%);
}

/* Advanced example: sepia effect */
.vintage-photo {
    filter: sepia(80%) contrast(120%) brightness(90%);
}

Exercise 12 Clip-path Shapes Intermediate

Use clip-path to create custom shapes:

Clip an image into a circle.
Clip an element into a triangle using polygon.
Create a hexagon shape using clip-path.
Add a transition effect when the shape changes.

Solution

/* Circle */
.circle-clip {
    clip-path: circle(50%);
}

/* Triangle */
.triangle-clip {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Hexagon */
.hexagon-clip {
    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
}

/* Transition effect */
.shape-morph {
    clip-path: circle(30%);
    transition: clip-path 0.5s ease;
}

.shape-morph:hover {
    clip-path: circle(50%);
}

/* Extra shapes */
.star-clip {
    clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
    );
}

Exercise 13 Advanced Custom Properties (Advanced CSS Variables) Intermediate

Use CSS variables in an advanced way:

Create a full color system using :root variables.
Create spacing scale variables like --space-xs, --space-sm, --space-md.
Use calc() with variables to create dynamic values.
Create a theme switcher by overriding variables in another class.

Solution

/* Color system */
:root {
    /* Colors */
    --color-primary: #007bff;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-bg: #ffffff;
    --color-text: #212529;
    
    /* Spacing Scale */
    --space-xs: 0.25rem;  /* 4px */
    --space-sm: 0.5rem;   /* 8px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 1.5rem;   /* 24px */
    --space-xl: 2rem;     /* 32px */
    
    /* Typography */
    --font-size-base: 16px;
    --font-size-lg: calc(var(--font-size-base) * 1.25);
    --font-size-xl: calc(var(--font-size-base) * 1.5);
}

/* Use variables */
.button {
    background-color: var(--color-primary);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-base);
}

/* Dark Theme */
.dark-theme {
    --color-bg: #1a1a1a;
    --color-text: #ffffff;
    --color-primary: #4dabf7;
}

/* Use calc with variables */
.container {
    padding: calc(var(--space-md) * 2);
    margin-bottom: calc(var(--space-lg) + var(--space-sm));
}

/* Grid system using variables */
:root {
    --grid-columns: 12;
    --grid-gap: var(--space-md);
}

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

DevArabi

CSS Course

CSS Exam 3: Advanced Layout and Intermediate (Composite Exercises)

CSS Exam 3: Advanced Layout and Intermediate

DevArabi

CSS Course

CSS Exam 3: Advanced Layout and Intermediate (Composite Exercises)

CSS Exam 3: Advanced Layout and Intermediate

Smart Editor