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

by

Don’t define the columns explicitly with grid-template-columns.

Make the columns implicit instead and then use grid-auto-columns to define their widths.

This will allow the first column (.content) to consume all space in the row when the second column (.sidebar) doesn’t exist.

.grid {
  display: grid;
  grid-auto-columns: 1fr 200px;
}

.content {
  grid-column: 1;
}

.sidebar {
  grid-column: 2;
}

.grid > * {
  border: 1px dashed red; /* demo only */
}
<p>With side bar:</p>

<div class="grid">

  <div class="content">
    <p>content</p>
  </div>
  
  <div class="sidebar">
    <p>sidebar</p>
  </div>

</div>

<p>No side bar:</p>

<div class="grid">

  <div class="content">
    <p>content</p>
  </div>
  
</div>

More Related Contents:

  1. Make a div span two rows in a grid
  2. Prevent content from expanding grid items
  3. Why aren’t my grid-template-areas with ASCII art not working?
  4. Aligning grid items across the entire row/column (like flex items can)
  5. Equal height rows in CSS Grid Layout
  6. Position deeply nested elements in a higher level grid container
  7. Align child elements of different blocks
  8. Browser support for CSS Grid
  9. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  10. Why are CSS named grid areas not in quotes?
  11. What is the difference between auto-fill and auto-fit?
  12. How to make the items in the last row consume remaining space in CSS Grid?
  13. A grid layout with responsive squares
  14. Create a Masonry grid with flexbox (or other CSS)
  15. Why percentage value within grid-gap create overflow in CSS grid?
  16. Using CSS transitions in CSS Grid Layout
  17. CSS Grid – Auto height rows, sizing to content
  18. Can I have a varying number of columns per row in a CSS grid?
  19. Is there a “subgrid” feature, to position “grandchildren” of a grid container?
  20. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  21. Percentage padding / margin on grid item ignored in Firefox
  22. Setting different lengths for grid gaps in CSS Grid
  23. How do you collapse unused row in a CSS grid?
  24. Can I make a CSS grid with dynamic number of rows or columns?
  25. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  26. How is “grid-template-rows: auto auto 1fr auto” interpreted?
  27. grid-area does not seem to work with the attr function, is this by design?
  28. How to center content and make the background cover the full column when using CSS Grid?
  29. Getting columns to wrap in CSS Grid
  30. Why doesn’t min-content work with auto-fill or auto-fit?

Leave a Comment