How do you create multi-column layouts with CSS

Creating multi-column layouts with CSS can enhance the visual structure of your web page. This technique allows you to organize content into several columns, making it easy for users to read and navigate.

multi-column layouts, CSS grid, Flexbox, responsive design


            <style>
            .container {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }
            .column {
                background-color: #f1f1f1;
                padding: 20px;
                border: 1px solid #ccc;
            }
            </style>

            <div class="container">
                <div class="column">Column 1</div>
                <div class="column">Column 2</div>
                <div class="column">Column 3</div>
            </div>