Grid css – auto positioning elements in horizontal [closed]

I have a problem with a css grid, because I am creating the windows metro UI and I want the elements to be positioned in horizontally, but not vertically, like that.

enter image description here

.root{
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: 525px;
        grid-auto-columns: 60px;
        grid-auto-rows: 60px;
        height: 574px;
    }

    .grid-container{
        display: grid;
        grid-auto-rows: 60px;
        grid-auto-columns: 60px;
        grid-template-rows: repeat(8, 60px);
        grid-template-columns: repeat(4, 60px);
        grid-gap: .5rem;
        align-content: start;
        background-color: var(--overlay);
        padding: .5rem;
        border: 1px solid;
    }

    .grid-container > div{
        border: 1px solid;
        width: 60px;
        height: 60px;
        background-color: red;
        text-align: center;
    }
<div class="root">
                <div class="grid-container">
                    <div class="item1">1</div>
                    <div class="item2">2</div>
                    <div class="item3">3</div>
                    <div class="item4">4</div>
                    <div class="item5">5</div>
                    <div class="item6">6</div>
                    <div class="item7">7</div>
                    <div class="item8">8</div>
                    <div class="item1">1</div>
                    <div class="item2">2</div>
                    <div class="item3">3</div>
                    <div class="item4">4</div>
                    <div class="item5">5</div>
                    <div class="item6">6</div>
                    <div class="item7">7</div>
                    <div class="item8">8</div>
                    <div class="item2">2</div>
                    <div class="item3">3</div>
                    <div class="item4">4</div>
                    <div class="item5">5</div>
                    <div class="item6">6</div>
                    <div class="item7">7</div>
                    <div class="item8">8</div>
                    <div class="item2">2</div>
                    <div class="item3">3</div>
                    <div class="item4">4</div>
                    <div class="item5">5</div>
                    <div class="item6">6</div>
                    <div class="item7">7</div>
                    <div class="item8">8</div>
                </div>
                
                <div class="grid-container">
                    <div class="item1">1</div>
                    <div class="item2">2</div>
                    <div class="item3">3</div>
                    <div class="item4">4</div>
                    <div class="item5">5</div>
                    <div class="item6">6</div>
                    <div class="item7">7</div>
                    <div class="item8">8</div>
                    <div class="item1">1</div>
                    <div class="item2">2</div>
                    <div class="item3">3</div>
                    <div class="item4">4</div>
                    <div class="item5">5</div>
                    <div class="item6">6</div>
                    <div class="item7">7</div>
                    <div class="item8">8</div>
                </div>
                
                <div class="grid-container">
                    <div class="item1">1</div>
                    <div class="item2">2</div>
                    <div class="item3">3</div>
                    <div class="item4">4</div>
                    <div class="item5">5</div>
                    <div class="item6">6</div>
                    <div class="item7">7</div>
                    <div class="item8">8</div>
                    <div class="item1">1</div>
                    <div class="item2">2</div>
                    <div class="item3">3</div>
                    <div class="item4">4</div>
                    <div class="item5">5</div>
                    <div class="item6">6</div>
                    <div class="item7">7</div>
                    <div class="item8">8</div>
                </div>
            </div>

The last element in the first container came out container, but I want this element to be passed to the next line, like in the picture, and container has auto width, because if there elements are a lot of these container must fit it.

Please, help me.



Read more here: https://stackoverflow.com/questions/64400527/grid-css-auto-positioning-elements-in-horizontal

Content Attribution

This content was originally published by Kosa TV at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: