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 class="container d-flex flex-column flex-grow-1 justify-content-center">
<div class="row text-center">
<div class="col-12 text-center">
<div class="doc-details-grid-wrapper">
<div class="doc-details-title">
<h4>Section 1</h4>
<hr>
</div>
<div class="doc-details-grid">
<a href="" class="box box1 callout">
<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="" class="box box2 callout">
<h5>Section 1 Box 2</h5>
<p>Short description goes here.</p>
</a>
<a href="" class="box box3 callout">
<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="" class="box box4 callout">
<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="" class="box box5 callout">
<h5>Section 1 Box 5</h5>
</a>
<div class="doc-details-title">
<h4>Section 2 - This should start underneath the above five boxes on its own row.</h4>
<hr>
</div>
<a href="" class="box box6 callout">
<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="" class="box box6 callout">
<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="" class="box box6 callout">
<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="" class="box box6 callout">
<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>Solution :
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 class="container d-flex flex-column flex-grow-1 justify-content-center">
<div class="row text-center">
<div class="col-12 text-center">
<div class="doc-details-grid-wrapper">
<div class="doc-details-title">
<h4>Section 1</h4>
<hr>
</div>
<div class="doc-details-grid">
<a href="" class="box box1 callout">
<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="" class="box box2 callout">
<h5>Section 1 Box 2</h5>
<p>Short description goes here.</p>
</a>
<a href="" class="box box3 callout">
<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="" class="box box4 callout">
<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="" class="box box5 callout">
<h5>Section 1 Box 5</h5>
</a>
<br>
<div class="doc-details-title" 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="" class="box box6 callout">
<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="" class="box box6 callout">
<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="" class="box box6 callout">
<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="" class="box box6 callout">
<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>