how to give space after the 2nd column of 4 grid columns?

user_8137133 0
Viewed 39

I have tried like this. but I need to give space vertically at the middle only in between 2nd and 3rd column. How to do that?

.grid-container{
    background: #999999;
    padding: 20px;
    margin: 10px;
    height: 500px;
    display: grid;
    grid-template-columns: 80px 80px 80px 80px;
    grid-template-rows: 80px 80px 80px;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    align-content: center;
    justify-content: center;
}
.item{
    border: 1px solid rgb(20, 118, 184);
    font-size: 18px;
    display: grid;
    align-content: center;
    justify-content: center;
}
<div class="grid-container">
        <div class="item">A1</div>
        <div class="item">A2</div>
        <div class="item">A3</div>
        <div class="item">A4</div>
        <div class="item">A5</div>
        <div class="item">A6</div>
        <div class="item item11">A7</div>
        <div class="item item22">A8</div>
        <div class="item">A9</div>
        <div class="item">A10</div>
        <div class="item">A11</div>
        <div class="item">A12</div>
    </div>

How can I give a at the middle vertically?

css-grid css html
1 Answers

add an extra empty column:

.grid-container{
    background: #999999;
    padding: 20px;
    margin: 10px;
    height: 500px;
    display: grid;
    grid-template-columns: 80px 80px 10px 80px 80px; /* added a column in the middle */
    grid-template-rows: 80px 80px 80px;
    grid-gap: 10px;
    align-content: center;
    justify-content: center;
    grid-auto-flow:dense; /* to make sure we fill all the spaces*/
}
.item{
    border: 1px solid rgb(20, 118, 184);
    font-size: 18px;
    display: grid;
    align-content: center;
    justify-content: center;
}

/* the pseudo element will take the new column added */
.grid-container::before {
  content:"";
  grid-column:3;
  grid-row:span 3;
}
<div class="grid-container">
        <div class="item">A1</div>
        <div class="item">A2</div>
        <div class="item">A3</div>
        <div class="item">A4</div>
        <div class="item">A5</div>
        <div class="item">A6</div>
        <div class="item item11">A7</div>
        <div class="item item22">A8</div>
        <div class="item">A9</div>
        <div class="item">A10</div>
        <div class="item">A11</div>
        <div class="item">A12</div>
    </div>

Also like below without pseudo element:

.grid-container{
    background: #999999;
    padding: 20px;
    margin: 10px;
    height: 500px;
    display: grid;
    grid-template-columns: 80px 80px 10px 80px 80px; /* added a column in the middle */
    grid-template-rows: 80px 80px 80px;
    grid-gap: 10px;
    align-content: center;
    justify-content: center;
}
.item{
    border: 1px solid rgb(20, 118, 184);
    font-size: 18px;
    display: grid;
    align-content: center;
    justify-content: center;
}
.item:nth-child(4n + 3) {
  grid-column:4; /* jump the middle column */
}
<div class="grid-container">
        <div class="item">A1</div>
        <div class="item">A2</div>
        <div class="item">A3</div>
        <div class="item">A4</div>
        <div class="item">A5</div>
        <div class="item">A6</div>
        <div class="item item11">A7</div>
        <div class="item item22">A8</div>
        <div class="item">A9</div>
        <div class="item">A10</div>
        <div class="item">A11</div>
        <div class="item">A12</div>
    </div>

user_86203330
Related