How can I get the second row of my grid to align vertically?-CodePudding

trying to get my head around CSS grids, but cannot seem to get column5, 6 and 7 to centre vertically on the screen (please see code snippet below). I've tried justify-content, align-content, place-items, but nothing seems to work for me. Any advice would be great please.

.grid {
  display: block;
  padding: 16px;

    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(4, 1fr);
    
    .col:nth-last-child(2) {
    grid-row-start: 2;
    grid-column: 1 / span 1;
    
}

<div >
         <div >
            <h3>column1</h3>
         </div>
         <div >
            <h3>column2</h3>
         </div>
         <div >
            <h3>column3</h3>
         </div>
         <div >
            <h3>column4</h3>
         </div>
         <div >
            <h3>column5</h3>
         </div>
         <div >
            <h3>column6</h3>
         </div>
         <div >
            <h3>column7</h3>
         </div>
</div>

CodePudding user response：

Try

<div >
    <div >
         <div >
            <h3>column1</h3>
         </div>
         <div >
            <h3>column2</h3>
         </div>
         <div >
            <h3>column3</h3>
         </div>
         <div >
            <h3>column4</h3>
         </div>
  </div>
  <div >
         <div >
            <h3>column5</h3>
         </div>
         <div >
            <h3>column6</h3>
         </div>
         <div >
            <h3>column7</h3>
         </div>
   </div>
</div>

This will create two rows with 4 columns each aligned vertically.

CodePudding user response：

You need to tell your grid to be the full height of the page.

.grid {
display: block;
padding: 16px;
height: 100%;

display: grid;
grid-gap: 16px;
grid-template-columns: repeat(4, 1fr);
  
    .col: nth-last-child(2) {
    grid-row-start: 2;
    grid-column: 1 / span 1;
    }
}