CSS Intermediate Level

CSS Grid

Powerful

CSS Grid is a two-dimensional layout system for creating complex layouts.

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
grid-template-areas: "header header header";

1

2

3

4

Essential

Create layouts that adapt to different screen sizes using media queries.

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

/* Fluid typography */
font-size: clamp(1rem, 2vw, 2rem);

Try resizing your browser window!

Dynamic

Custom properties that can be reused and updated throughout your stylesheet.

:root {
--primary: #6366f1;
--radius: 12px;
}

button { background: var(--primary); }

Smooth

Add motion and interactivity to your designs.

transition: all 0.3s ease;
transition: transform 0.2s cubic-bezier(...);

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

Hover over me!

Interactive

Style elements based on their state or position.

a:hover { color: blue; }
input:focus { border-color: green; }
li:nth-child(even) { background: gray; }
div:first-child { margin-top: 0; }

Creative

Create and style virtual elements that aren't in the HTML.

::before { content: "📝 "; }
::after { content: "→"; }
::first-line { font-weight: bold; }
::selection { background: yellow; }