new.grid.css

Table of content

What is this page?
CSS source
2 columns with same width
2 columns, 1/3 and 2/3
4 columns with same width

What is this page? ↑

This page shows examples of code to use a minimalist grid, associated to new.css but it can work without any external CSS. The display is responsive, items will be stacked vertically if the viewport is smaller than 801 pixels.

CSS source ↑

View the code 👀

.flex {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.5rem 2rem;
}

.flex.one-one > div {
    flex-grow: 1;
    min-width: 48%;
}

.flex.one-two > div:first-child {
    min-width: 30%;
    flex-grow: 1;
}

.flex.one-two > div:last-child {
    min-width: 65%;
    flex-grow: 2;
}

.flex.one-one-one-one > div {
    min-width: 20%;
    flex-grow: 1;
}

/* responsiveness */
@media all and (max-width: 800px) {
    /* container */
    .flex {
        flex-direction: column;
    }

    .flex.one-one-one-one {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .flex.one-one-one-one > div {
        width: 40%;
    }

    .flex.one-one-one-one > div img {
        min-width: 180px;
    }
}

See the CSS file

2 columns with same width ↑

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis pulvinar arcu at pulvinar. Pellentesque sed malesuada neque, at sollicitudin ante. Nunc in quam et magna consectetur lacinia. In luctus nibh dui, sit amet egestas lacus maximus quis. Maecenas et mattis libero.

Sed volutpat

Sed volutpat euismod nulla, sed molestie ex pretium a. Morbi semper, libero et feugiat fermentum, tortor augue feugiat nisi, ut fermentum risus augue eu augue.

View the code 👀

<div class="flex one-one">
    <div>
        <h4>Lorem Ipsum</h4>
        <p>Lorem ipsum dolor sit amet, …</p
    </div>
    <div>
        <h4>Sed volutpat</h4>
        <p>Sed volutpat euismod nulla, …</p>
    </div>
</div>

2 columns, 1/3 and 2/3 ↑

Lorem Ipsum

Sed volutpat

Sed volutpat euismod nulla, sed molestie ex pretium a. Morbi semper, libero et feugiat fermentum, tortor augue feugiat nisi, ut fermentum risus augue eu augue.

View the code 👀

<div class="flex one-two">
    <div>
        <h4>Lorem Ipsum</h4>
        <p>Lorem ipsum dolor sit amet, …</p
    </div>
    <div>
        <h4>Sed volutpat</h4>
        <p>Sed volutpat euismod nulla, …</p>
    </div>
</div>

4 columns with same width ↑

🐶 1

🐶 2

🐶 3

🐶 4

View the code 👀

<div class="flex one-one-one-one">
    <div>
        <h4>🐶 1</h4>
        <p><img src=" https://placedog.net/180/135?id=1" width="180" height="135" alt="🐶 1"></p>
    </div>
    <div>
        <h4>🐶 2</h4>
        <p><img src=" https://placedog.net/180/135?id=2" width="180" height="135" alt="🐶 2"></p>
    </div>
    <div>
        <h4>🐶 3</h4>
        <p><img src=" https://placedog.net/180/135?id=3" width="180" height="135" alt="🐶 3"></p>
    </div>
    <div>
        <h4>🐶 4</h4>
        <p><img src=" https://placedog.net/180/135?id=4" width="180" height="135" alt="🐶 4"></p>
    </div>
</div>