Home > Blockchain >  Using grid, is it possible to insert a div that takes up an entire row between grid objects
Using grid, is it possible to insert a div that takes up an entire row between grid objects

Time:10-06

I have a container that contains a maximum of three grid objects per row. All these objects need to be the same height and should wrap so that when there are fewer than three boxes on a row, they aligned to the left.

Now there's a need to add another section under that group of grid objects (Section Two) where each grid object will be the same height as those grid objects in Section One.

I have this HTML and CSS, but the "Section 2" heading doesn't start on a new row. How can I force it to start on a new row?

 .doc-details-grid-wrapper {
        margin: 40px 0 50px;
    }
    
    .doc-details-grid-wrapper h4 {
        padding-bottom: 0;
        text-align: left;
    }
    
    .doc-details-title {
        padding: 0 15px;
    }
    
    .doc-details-grid {
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-rows: 1fr;
        grid-template-columns: repeat(3, 1fr);
        margin: 10px 0 50px;
        min-height: 200px;
        list-style: none;
    }

    .doc-details-grid>a {
        background-color: #2A88A6;
    }
    
    .doc-details-grid>a:hover {
        background-color: #136A85;
    }
    
    .doc-details-grid>a:last-child {
        grid-column-start: 2;
    }
    
    .doc-details-grid h5 {
        padding-bottom: 0;
    }
    
    .doc-details-grid p {
        color: #ffffff;
    }
    
    .doc-details-grid>div>div {
        display: flex;
        justify-content: center;
        flex-direction: row;
    }
    
    .box {
        margin: 10px;
        border-radius: var(--bs-border-radius-lg)!important;
    }
    /* DOCS END */
    
    @media (min-width: 768px) {
        .masthead {
            max-width: none;
            min-height: 70vh;
        }
        h1 {
            font-size: calc(1.0rem   2.3vw);
            margin: unset!important;
        }
        .docs-grid>a {
            display: flex;
            flex-basis: calc(50% - 40px);
            justify-content: center;
            flex-direction: column;
        }
        .doc-details-grid>a {
            display: flex;
            flex-basis: calc(33% - 40px);
            flex-direction: column;
        }
    }
````
<div >
            <div >
                <div >
                    <div >
                        <div >
                            <h4>Section 1</h4>
                            <hr>
                        </div>
                        <div >
                            <a href="" >
                                <h5>Section 1 Box 1</h5>
                                <p>Short description goes here. This is where you can provide a brief preview about the contents of the downloadable PDF document.</p>
                            </a>
                            <a href="" >
                                <h5>Section 1 Box 2</h5>
                                <p>Short description goes here.</p>
                            </a>
                            <a href="" >
                                <h5>Section 1 Box 3</h5>
                                <p>This is where you can provide a brief preview about the contents of the downloadable PDF document.</p>
                            </a>
                            <a href="" >
                                <h5>Section 1 Box 4</h5>
                                <p>This is where you can provide a brief preview about the contents of the downloadable PDF document. This description is a little longer than the others.</p>
                            </a>
                            <a href="" >
                                <h5>Section 1 Box 5</h5>
                            </a>
                            <div >
                                <h4>Section 2 - This should start underneath the above five boxes on its own row.</h4>
                                <hr>
                            </div>
                            <a href="" >
                                <h5>Section 2 Box 1</h5>
                              <p>This is the first grid object in Section 2 and should be the first box on the left.</p>
                            </a>
                          <a href="" >
                                <h5>Section 2 Box 2</h5>
                              <p>This is the first grid object in Section 2 and should be the first box on the left.</p>
                            </a>
                          <a href="" >
                                <h5>Section 2 Box 3</h5>
                              <p>This is the first grid object in Section 2 and should be the first box on the left.</p>
                            </a>
                          <a href="" >
                                <h5>Section 2 Box 4</h5>
                              <p>This is the first grid object in Section 2 and should be the first box on the left.</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div

CodePudding user response:

try this. I added <br> before element which had to have 100% width and grid-area: 3/1/4/4 to element. If you don't want that big space between section 2 and elements just add grid-template-rows: 1fr 1fr 90px 1fr 1fr; to class doc-details-grid. To display Section 2 Box 4 on the left instead of in the center I just deleted it from css.

.doc-details-grid>a:last-child {
        grid-column-start: 2;
}

.doc-details-grid-wrapper {
        margin: 40px 0 50px;
    }
    
    .doc-details-grid-wrapper h4 {
        padding-bottom: 0;
        text-align: left;
    }
    
    .doc-details-title {
        padding: 0 15px;
    }
    
    .doc-details-grid {
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-rows: 1fr;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr 1fr 90px 1fr 1fr;
        margin: 10px 0 50px;
        min-height: 200px;
        list-style: none;
    }

    .doc-details-grid>a {
        background-color: #2A88A6;
    }
    
    .doc-details-grid>a:hover {
        background-color: #136A85;
    }
   
    
    .doc-details-grid h5 {
        padding-bottom: 0;
    }
    
    .doc-details-grid p {
        color: #ffffff;
    }
    
    .doc-details-grid>div>div {
        display: flex;
        justify-content: center;
        flex-direction: row;
    }
    
    .box {
        margin: 10px;
        border-radius: var(--bs-border-radius-lg)!important;
    }
    /* DOCS END */
    
    @media (min-width: 768px) {
        .masthead {
            max-width: none;
            min-height: 70vh;
        }
        h1 {
            font-size: calc(1.0rem   2.3vw);
            margin: unset!important;
        }
        .docs-grid>a {
            display: flex;
            flex-basis: calc(50% - 40px);
            justify-content: center;
            flex-direction: column;
        }
        .doc-details-grid>a {
            display: flex;
            flex-basis: calc(33% - 40px);
            flex-direction: column;
        }
    }
````
<div >
            <div >
                <div >
                    <div >
                        <div >
                            <h4>Section 1</h4>
                            <hr>
                        </div>
                        <div >
                            <a href="" >
                                <h5>Section 1 Box 1</h5>
                                <p>Short description goes here. This is where you can provide a brief preview about the contents of the downloadable PDF document.</p>
                            </a>
                            <a href="" >
                                <h5>Section 1 Box 2</h5>
                                <p>Short description goes here.</p>
                            </a>
                            <a href="" >
                                <h5>Section 1 Box 3</h5>
                                <p>This is where you can provide a brief preview about the contents of the downloadable PDF document.</p>
                            </a>
                            <a href="" >
                                <h5>Section 1 Box 4</h5>
                                <p>This is where you can provide a brief preview about the contents of the downloadable PDF document. This description is a little longer than the others.</p>
                            </a>
                            <a href="" >
                                <h5>Section 1 Box 5</h5>
                            </a>
                            <br>
                            <div  style="grid-area: 3/1/4/4">
                                <h4>Section 2 - This should start underneath the above five boxes on its own row.</h4>
                                <hr>
                            </div>
                            <a href="" >
                                <h5>Section 2 Box 1</h5>
                              <p>This is the first grid object in Section 2 and should be the first box on the left.</p>
                            </a>
                          <a href="" >
                                <h5>Section 2 Box 2</h5>
                              <p>This is the first grid object in Section 2 and should be the first box on the left.</p>
                            </a>
                          <a href="" >
                                <h5>Section 2 Box 3</h5>
                              <p>This is the first grid object in Section 2 and should be the first box on the left.</p>
                            </a>
                          <a href="" >
                                <h5>Section 2 Box 4</h5>
                              <p>This is the first grid object in Section 2 and should be the first box on the left.</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

  • Related