Search code examples
htmlcsscss-grid

Order of CSS grid items with 2 grid columns

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

.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 following 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