CODEWITHSUNDEEP
csscss-grid
Huqe Dato
Huqe Dato

Reputation: 255

CSS grid with certain elements in the middle (off-grid)

I need to create a page using CSS grid in this format:

grid

All items have equal dimensions (400*250), are normally four in a row, but sometimes, some of them, the red in the picture, must be placed in the middle (customer's request!) as their content is more important than others.

Therefore, these 'red' containers, centered horizontally should mathematically break the 4x grid and I don't know how to do that.

On a mobile device, all of them regardless are to be on one column.

Thanks in advance.

Upvotes: 0

Views: 171

Answers (1)

shotgun02
shotgun02

Reputation: 784

Check if this is what you want.

.box-container{
        display: grid;
        align-items:center;
        justify-content:center;
        grid-template-columns: auto auto auto auto;
    }
    .box{
        width:150px;
        height:100px;
        border:5px solid #000;
        margin:10px 15px;
    }
    .box-imp{
        background-color:red;
        grid-column-start: 1;
        grid-column-end: 5;
        justify-self:center;
    }
  
  @media only screen and (max-width: 768px){
        .box-container{
            grid-template-columns: auto;
        }
        .box-imp{
            grid-column-start: 1;
            grid-column-end: 2;
        }
    }
<div class="box-container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box box-imp"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box box-imp"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box box-imp"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

Upvotes: 2

Related Questions