CSS HTML 3 Columns Grid Broken at Smaller Widths

In modern web design, creating a responsive layout is crucial. A 3 - column grid layout is a common design pattern, which looks great on larger screens. However, when the screen width becomes smaller, such as on mobile devices, this layout may become unreadable or aesthetically unpleasing. In this blog, we will explore how to create a 3 - column grid in HTML and CSS that breaks into a single - column layout at smaller widths.

Table of Contents

  1. Fundamental Concepts
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Code Examples
  6. Conclusion
  7. References

Fundamental Concepts

CSS Grid and Flexbox

  • CSS Grid: It is a two - dimensional layout model that allows you to create grid containers and grid items. You can define rows and columns explicitly. For a 3 - column grid, you can use the grid-template-columns property to set three equal or unequal columns.
  • Flexbox: It is a one - dimensional layout model, mainly used for arranging items in a single row or column. You can use flex-wrap to wrap items when there is not enough space.

Media Queries

Media queries are used to apply different CSS styles based on the characteristics of the device, such as screen width, height, and orientation. In the context of our 3 - column grid, we use media queries to change the layout from a 3 - column to a single - column when the screen width is below a certain threshold.

Usage Methods

Using CSS Grid

  1. Create a Grid Container: First, you need to define an HTML element as a grid container using the display: grid property.
  2. Define Columns: Use the grid-template-columns property to specify three columns. For example, grid-template-columns: repeat(3, 1fr) creates three equal - width columns.
  3. Apply Media Queries: Use a media query to change the grid-template-columns property to 1fr when the screen width is small.

Using Flexbox

  1. Create a Flex Container: Set an HTML element as a flex container using display: flex.
  2. Arrange Items: By default, flex items are arranged in a row. You can use flex - basis to set the initial size of each item.
  3. Apply Media Queries: Use a media query to change the flex - direction to column when the screen width is small.

Common Practices

Floats (Old - School Method)

Before the advent of CSS Grid and Flexbox, floats were used to create multi - column layouts. You would float three elements to the left and clear the floats to prevent layout issues. However, this method has many drawbacks, such as collapsing containers and difficulty in handling vertical alignment.

Inline - Block

You can also use the display: inline - block property to arrange elements in a row. But this method has issues with white - space between elements and vertical alignment.

Best Practices

Responsive Design Principles

  • Mobile - First Design: Start designing for mobile devices first and then add styles for larger screens using media queries. This approach ensures that your website looks good on all devices.
  • Semantic HTML: Use appropriate HTML5 elements like <section> and <article> to structure your content. This makes your code more accessible and easier to maintain.
  • Minimize Media Queries: Try to use as few media queries as possible. Instead, use relative units like percentages and rem to create a more fluid layout.

Code Examples

CSS Grid Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale=1.0">
    <style>
       .grid - container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

       .grid - item {
            background-color: #f0f0f0;
            padding: 20px;
        }

        @media (max - width: 768px) {
           .grid - container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <div class="grid - container">
        <div class="grid - item">Column 1</div>
        <div class="grid - item">Column 2</div>
        <div class="grid - item">Column 3</div>
    </div>
</body>

</html>

Flexbox Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale=1.0">
    <style>
       .flex - container {
            display: flex;
            gap: 20px;
        }

       .flex - item {
            flex - basis: calc(33.333% - 20px);
            background-color: #f0f0f0;
            padding: 20px;
        }

        @media (max - width: 768px) {
           .flex - container {
                flex - direction: column;
            }
           .flex - item {
                flex - basis: auto;
            }
        }
    </style>
</head>

<body>
    <div class="flex - container">
        <div class="flex - item">Column 1</div>
        <div class="flex - item">Column 2</div>
        <div class="flex - item">Column 3</div>
    </div>
</body>

</html>

Conclusion

Creating a 3 - column grid layout that breaks into a single - column layout at smaller widths is an essential skill in modern web design. Both CSS Grid and Flexbox provide powerful and flexible ways to achieve this. By following best practices like mobile - first design and using semantic HTML, you can create responsive and accessible websites.

References