How to Make a Column Span Full Width When a Second Column Is Not There? (CSS Grid)

How to make a column span full width when a second column is not there? (CSS Grid)

I think I know the definitive answer to this question now. The problem with the answers so far is that they don't explain how to handle a sidebar that is on the left side of the main content (mainly because I didn't ask for it in the original question).

<div class="grid">

  <nav>
    <p>navigation</p>
  </nav>

  <main>
    <p>content</p>
  </main>

  <aside>
    <p>sidebar</p>
  </aside>

</div>

You can use this CSS:

.grid {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr fit-content(200px);
}

nav, aside {
  width: 100%;
}

/* ensures that the content will always be placed in the correct column */
nav { grid-column: 1; }
main { grid-column: 2; }
aside { grid-column: 3; }

This is also a good use case for grid-areas

.grid {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr fit-content(200px);
  grid-template-areas: "nav content sidebar";
}

nav, aside {
  width: 100%;
}

/* ensures that the content will always be placed in the correct column */
nav { grid-area: nav; }
main { grid-area: content; }
aside { grid-area: sidebar; }

An IE compatible version would look like this:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
}

nav, aside {
  width: 100%; /* Ensures that if the content exists, it takes up max-width */
  max-width: 200px; /* Prevents the content exceeding 200px in width */
}

/* ensures that the content will always be placed in the correct column */
nav {
  -ms-grid-column: 1;
  grid-column: 1;
}

main {
  -ms-grid-column: 2;
  grid-column: 2;
}

aside {
  -ms-grid-column: 3;
  grid-column: 3;
}

How do I make the first grid item span 100%?

Change the grid to three columns and set the first div to span them all at the appropriate point.

.footer-inner {  display: grid;  grid-template-columns: repeat(3, 1fr);}
.footer-inner div {  border: 1px solid grey;  text-align: center;}
.footer-inner :first-child {  grid-column: 1 / -1;}

<div class="footer-inner">  <div>One</div>  <div>Two</div>  <div>Three</div>  <div>Four</div></div>

Dynamically Fill CSS Grid Based on Second Column Percentage Width

Just use grid-template-columns: X% 1fr

.grid-row {
  display: grid;
  grid-template-columns: 70% 1fr;
}

* {
  outline:1px solid grey;
}

<div class="grid-row">
  <div class="content">
  Page content here.
  </div>
  <aside class="sidebar">
  Sidebar content here.
  </aside>
</div>

Make a grid column span the entire row

Here are two interesting sections in the CSS Grid specification:

7.1. The Explicit Grid

Numeric indexes in the grid-placement properties count from the edges
of the explicit grid. Positive indexes count from the start side,
while negative indexes count from the end side.

also here...

8.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

If a negative integer is given, it instead counts in reverse, starting
from the end edge of the explicit grid.

In other words, when dealing with an explicit grid, which means a grid defined by these properties:

grid-template-rows
grid-template-columns
grid-template-areas
grid (which is the shorthand for the three properties above, among others)

... you can make a grid area span all columns by setting this rule:

grid-column: 1 / -1;

That tells the grid area to span from the first column line to the last column line, which I believe meets your stated objective:

"We would need to apply something like grid-column: span ALL (if something like that exists), with meaning that ALL = till the end of current row."

jsFiddle demo

.grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));  background-color: silver;}
.grid-second {  grid-column: 2 / -1;  background-color: red;}

/* Not important fancy styles */
.grid div {  height: 40px;  text-align: center;  padding-top: 20px;}
.grid-another {  background-color: purple;  border: 1px solid gray;}

<div class="grid">  <div class="grid-first">First</div>  <div class="grid-second">Second (Want till end)</div></div><!-- Another same grid --><div class="grid">  <div class="grid-another">1</div>  <div class="grid-another">2</div>  <div class="grid-another">3</div>  <div class="grid-another">4</div>  <div class="grid-another">1</div>  <div class="grid-another">2</div>  <div class="grid-another">3</div>  <div class="grid-another">4</div>  <div class="grid-another">1</div>  <div class="grid-another">2</div>  <div class="grid-another">3</div>  <div class="grid-another">4</div></div>

Span grid items to the full width of the CSS Grid

You can span the archive-description and pagination across the columns of the grid by using grid-column: span 3.

See demo below - added borders for illustration (also made the li to div for valid markup):

.content {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  grid-gap: 20px;  position: relative;  border: 1px solid green;}.archive-description, .pagination {  grid-column: span 3;  text-align: center;}main > * {  border: 1px solid;}

<main class="content">  <div class="archive-description">Archive Title</div>  <article class="post entry">This is a post</article>  <article class="post entry">This is a post</article>  <article class="post entry">This is a post</article>  <div class="pagination">Previous & Next Entry</div></main>

How to use CSS grid to have optional third row span two columns inside an Angular *ngFor

You can add a class with a grid-column: 1/3
to the error label.
This make the error label fill the entire width (two columns)

how to divide css grid like first column 50%, second column 50% and third column 100%?

CSS:

.item{
    border: 1px solid red;
    text-align: center;
    padding: 10px;
}
.main-dev {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 200px;
}
.item3{
    grid-column: 1 / 3; /* or grid-column: 1 / span 2 */
}

HTML:

<div class="main-dev">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item item3">3</div>
</div>

Sample Image

Take 2 columns in 2-columns layout but not when 1-column layout in CSS grid without @media

Use grid-column: 1/-1;

.box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 24px 40px;
}

span {
  height: 50px;
  background: blue;
}

.more {
  grid-column: 1/-1;
  background: red;
}

<div class="box">
  <span></span>
  <span></span>
  <span class="more"></span>
  <span></span>
  <span></span>
</div>

How to Make a Column Span Full Width When a Second Column Is Not There? (CSS Grid)