Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

Order of CSS grid items with 2 grid columns

byMR
July 18, 2023

I have a Grid layout with 11 grid items. I have used grid-auto-flow: row; so that the items are divided into 2 columns distributing an appropriate equal height for each column based on the number of items. However, The grid items are not displayed in proper order and instead they are displayed side by side. For example when there are 11 grid items, I want the 1st column to display grid items 1,2,3,4,5 & 6 and 2nd column to display grid items 7,8,9,10 & 11. How can I achieve this using CSS/JS without rearranging the grid items or placing 2 divs inside the container div?

The output that I want:

enter image description here

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel 

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: start;
    margin: 0 16px;
    row-gap: 32px;
    grid-auto-flow: row;
}

.grid-item {
    display: flex;
    justify-content: flex-start;
}

.number {
    align-self: flex-start;
    display: flex;
    justify-content: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-radius: 0.125rem;
    background-color: #f2f3f5;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: bold;
    color: #111827;
    margin-right: 1.5rem;
    min-width: 54px;
    max-width: 54px;

}

.item-content {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: #CBD5E0;
    font-weight: normal;
    margin-top: -0.25rem;
    margin-bottom: -0.25rem;

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Items</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="grid-item">
            <div class="number">
                1
            </div>
            <div class="item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item">
            <div class="number">
              2
            </div>
            <div class="item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item">
            <div class="number">
                3
            </div>
            <div class="item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item">
            <div class="number">
              4
            </div>
            <div class="item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item">
            <div class="number">
                5
            </div>
            <div class="item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item">
            <div class="number">
               6
            </div>
            <div class="item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item">
            <div class="number">
                7
            </div>
            <div class="item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item">
            <div class="number">
              8
            </div>
            <div class="item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item">
            <div class="number">
                9
            </div>
            <div class="item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item">
            <div class="number">
                10
            </div>
            <div class="item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item">
            <div class="number">
                11
            </div>
            <div class="item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
    </div>

</body>

</html>

>Solution :

You can use the follwing grid rules if you have a hard coded amount of row/cols

grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-auto-flow: column;

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
    justify-content: center;
    align-items: start;
    margin: 0 16px;
    row-gap: 32px;
    grid-auto-flow: column;
    
}

.grid-item {
    display: flex;
    justify-content: flex-start;
}

.number {
    align-self: flex-start;
    display: flex;
    justify-content: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-radius: 0.125rem;
    background-color: #f2f3f5;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: bold;
    color: #111827;
    margin-right: 1.5rem;
    min-width: 54px;
    max-width: 54px;

}

.item-content {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: #CBD5E0;
    font-weight: normal;
    margin-top: -0.25rem;
    margin-bottom: -0.25rem;

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Items</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="grid-item">
            <div class="number">
                1
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item">
            <div class="number">
                2
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item">
            <div class="number">
                3
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item">
            <div class="number">
                4
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class=" grid-item">
            <div class="number">
                5
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class=" grid-item">
            <div class="number">
                6
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class=" grid-item">
            <div class="number">
                7
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item">
            <div class="number">
                8
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class=" grid-item">
            <div class="number">
                9
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class=" grid-item">
            <div class="number">
                10
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class=" grid-item">
            <div class="number">
                11
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
    </div>

</body>

</html>

If you would like a dynamic amount of rows, you’ll need to add a class to each odd element to set grid-column-start.

.container {
    display: grid;
    grid-template-rows: 1fr;
    grid-auto-flow: row dense;
    
}

.grid-item {
    grid-column-start: 2;
}

.grid-item-left {
    grid-column-start: 1;
}

.container {
    display: grid;
    grid-template-rows: 1fr;
    justify-content: center;
    align-items: start;
    margin: 0 16px;
    row-gap: 32px;
    grid-auto-flow: row dense;
    
}

.grid-item {
    display: flex;
    justify-content: flex-start;
    grid-column-start: 2;
}

.grid-item-left {
    grid-column-start: 1;
}

.number {
    align-self: flex-start;
    display: flex;
    justify-content: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-radius: 0.125rem;
    background-color: #f2f3f5;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: bold;
    color: #111827;
    margin-right: 1.5rem;
    min-width: 54px;
    max-width: 54px;

}

.item-content {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: #CBD5E0;
    font-weight: normal;
    margin-top: -0.25rem;
    margin-bottom: -0.25rem;

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Items</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="grid-item grid-item-left">
            <div class="number">
                1
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item grid-item-left">
            <div class="number">
                2
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item grid-item-left">
            <div class="number">
                3
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item grid-item-left">
            <div class="number">
                4
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class=" grid-item grid-item-left">
            <div class="number">
                5
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class=" grid-item grid-item-left">
            <div class="number">
                6
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class=" grid-item">
            <div class="number">
                7
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class="grid-item">
            <div class="number">
                8
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class=" grid-item">
            <div class="number">
                9
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class=" grid-item">
            <div class="number">
                10
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
        <div class=" grid-item">
            <div class="number">
                11
            </div>
            <div class=".item-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus quasi eos sint illum autem, ipsum quis. Minima autem hic fugit.
            </div>
        </div>
    </div>

</body>

</html>

This can be made ‘more dynamic’ by using some Javascript to assign the classes

byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading