Modern CSS Techniques - Grid, Flexbox, and Advanced Patterns

Modern CSS provides powerful tools for creating flexible, responsive layouts. This guide covers CSS Grid, Flexbox, custom properties, and advanced techniques for modern web development.

Introduction to Modern CSS

Modern CSS has evolved significantly, offering powerful layout systems and features that make responsive design easier and more maintainable.

Key Modern Features:

• CSS Grid - Two-dimensional layouts
• Flexbox - One-dimensional layouts
• Custom Properties - CSS variables
• Container Queries - Component-based responsive design
• Logical Properties - Better internationalization

CSS Grid Layout

Basic Grid

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

Grid Areas

.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
}

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

Responsive Grid

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

Flexbox Layout

Basic Flexbox

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

Flexbox Patterns

Centering:

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Equal Height Columns:

.columns {
    display: flex;
}

.column {
    flex: 1;
}

CSS Custom Properties

Defining Variables

:root {
    --primary-color: #3b82f6;
    --spacing-unit: 1rem;
    --border-radius: 8px;
}

Using Variables

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
    border-radius: var(--border-radius);
}

Scoped Variables

.card {
    --card-padding: 1.5rem;
    padding: var(--card-padding);
}

.card.large {
    --card-padding: 2rem;
}

Container Queries

Container Query Setup

.card-container {
    container-type: inline-size;
    container-name: card;
}

@container card (min-width: 400px) {
    .card {
        display: flex;
        flex-direction: row;
    }
}

Advanced Patterns

Aspect Ratio

.media {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

Clamp for Responsive Typography

.heading {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

Conclusion

Modern CSS techniques enable:

• Flexible, responsive layouts
• Maintainable code with variables
• Component-based responsive design
• Better performance

Key takeaways:

• Use Grid for two-dimensional layouts
• Use Flexbox for one-dimensional layouts
• Leverage custom properties for theming
• Explore container queries for components

Mastering these techniques creates modern, maintainable CSS architectures.