Search code examples
csscss-grid

css-grid: place element "outside" of grid

I am new to css grid I try to achieve the layout from the image attached where ONE element DIV 4 is wider than the grid layout. I try to avoid to close the grid-div before DIV 4 and then reopen the grid after DIV 4 again so I can controll the appearance of each grid element and how it is displayed through ONE css-class only and it won't need a different div-structure.

https://codepen.io/anon/pen/RBdjbd

 .grid-2er {
     grid: auto-flow dense / 1fr 1fr;
     display: grid;
     grid-gap: 20px;
     grid-auto-rows: auto;
}

.grid-2er .halfwidth {
     grid-column: 1 / -1;
}

.grid-2er .fullwidth {
     grid-column: 1 / -1;
}

enter image description here

Solution

  • Might I suggest a four column grid

      grid-template-columns: 1fr minmax(0, 400px) minmax(0, 400px) 1fr;

    Codepen Demo

    * {
  margin: 0;
  padding: 0;
  text-decoration: none;
  outline: none;
  font-weight: 300;
  border: none;
  font-family: "Source Sans Pro", sans-serif;
  text-align: center;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

.grid-2er {
  grid-template-columns: 1fr minmax(0, 400px) minmax(0, 400px) 1fr;
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: auto;
}

.grid-2er * {
  background: blue;
  color: white
}

.grid-2er .mainwidth {
  grid-column: 2 / 4;
}

.grid-2er .halfwidth {
  grid-column: 2;
}

.halfwidth+.halfwidth {
  grid-column: 3;
}

.grid-2er .fullwidth {
  grid-column: 1 / -1;
}
    <div class="grid-2er">
  <div class="mainwidth">DIV 1</div>
  <div class="halfwidth">DIV 2</div>
  <div class="halfwidth">DIV 3</div>
  <div class="fullwidth">DIV 4</div>
  <div class="halfwidth">DIV 5</div>
  <div class="halfwidth">DIV 6</div>
</div>