Items That Span All Columns/Rows Using CSS Grid Layout

make a single row in CSS grid span all columns

Maybe it is better to use:

fieldset legend {
  grid-column: 1/-1;
}

Or if you only need 3 columns

fieldset legend {
  grid-column: 1/ span 3;
}

Make a grid item span to the last row / column in implicit grid

You can add grid-row-start to that boxes css, and set it to span an absurdly high number.

.container {  display: grid;  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;   grid-template-rows: auto [last-line];}
.box {  background-color: blue;  padding: 20px;  border: 1px solid red;}
.box:nth-child(3) {  background-color: yellow;  grid-column: last-col / span 1;  grid-row: 1 / last-line;  grid-row-start: span 9000;}

<div class="container">  <div class="box"></div>  <div class="box"></div>  <div class="box">3</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>

How to use row span in a css grid

As said in the comment, you dont span 2 rows, you span 2 columns. Also you need to apply the class to the 1st element: .wide { grid-column: span 2; }

In your picture you also have a 6 column grid not a 5 column one

.grid {
  display: grid;
  grid-template-columns: repeat(6, 90px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
}

.wide {
  grid-column: span 2;
}

/* for styling purpose only */
.grid > div:nth-child(n+1) {
  background-color: grey;
}

.grid > div:nth-child(1) {
  background-color: brown;
}

<div class="grid">
  <div class="wide"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS grid layout with span and *ngFor number of columns

You can do it like so:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.my-grid {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  grid-template-rows: 1fr 1fr;
  width: 900px;
  min-width: max-content;
  text-align: center;
}

.my-grid>* {
  height: 300px;
  display: grid;
  place-items: center;
  border: 1px solid black;
}

.dynamic {
  display: flex;
}

.dynamic>div {
  border: 1px solid black;
  width: 300px;
  height: 100%;
  display: grid;
  place-items: center;
}

<div class="my-grid">
  <div class="A">
    A
  </div>
  <div class="B">
    B
  </div>
  <div class="C">
    C
  </div>
  <div class="D">
    D
  </div>
  <div class="dynamic">
    <div>E</div>
    <div>E</div>
    <div>E</div>
    <div>E</div>
  </div>
  <div class="F">
    F
  </div>
</div>

---

Related Topics