CSS: How to prevent empty cells in grid (by removing partially empty rows)

I'm trying to create a grid of divs that all need to be X pixels wide, with as many rows as needed to fit all of them. I don't know the width of the outer div. This is easy to accomplish using css grid:

#container {
  resize: both;
  overflow: auto;
  width: 170px;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  
}

#container div {
  border: 1px solid red;
}
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

This is not possible to achieve using only CSS. It could be if you had separated rows in html like that:

<div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
</div>
<div class="row">
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
</div>
<div class="row">
    <div class="cell"></div>
    <div class="cell">7</div>
    <div class="cell">8</div>
</div>

Styling Empty Cells With Generated Content And CSS Grid Layout , Well, CSS Generated Content can help you do just that. Ever wondered how to achieve styling of empty grid cells without adding I do prefer however to keep my styling in one place if possible, safely in the stylesheet. If we removed the grid-row-gap and used padding to make the space, it still wouldn't� The empty-cells property sets whether or not to display borders on empty cells in a table. Note: This property has no effect if border-collapse is "collapse". Default value:

One hack is to consider a pseudo element that will hide them. Of course, you will not have transparency and your element will not fit the height of the container.

#container {
  resize: both;
  overflow: hidden;
  width: 170px;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  
}

#container div {
  border: 1px solid red;
}

#container:after {
  content:"";
  background:#fff;
  margin-left:-100vw;
  margin-right:20px;
  
}
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

empty-cells, The empty-cells property in CSS selects empty table cells for the purpose of specifying whether or not to display borders and backgrounds on� To leave a cell empty use the full stop character, '.'. If I want to only display the footer directly under the main content I would need to leave the three cells underneath the sidebar empty..header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; }

Since it seems it's not possible with CSS only, in the end I decided to solve this using javascript, like this:

var cg = document.getElementById('container');

var style = document.createElement('style');
document.head.appendChild(style);

var hideHalfEmptyColumns = function() {
  // How many columns it's gonna be
  var columns = Math.floor(cg.offsetWidth / 50);
  // How many elements are showing
  var elements = cg.childElementCount;
  // How many cells are on completely filled rows
  var elementsToShow = columns * Math.floor(elements / columns);
  style.innerHTML = `
            #container>div:nth-child(n + ${elementsToShow+1}) {
                display: none;
            }`;
}

// In the real world I'd run this on the window resize event as well, but since elements does not have this function the example is a bit broken
hideHalfEmptyColumns();
#container {
  resize: both;
  overflow: auto;
  width: 170px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}

#container div {
  border: 1px solid red;
}
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

Empty cells in HTML tables, Empty cells in tables often cause problems to HTML authors. to deal with this issue as well as to avoid it by making cells nonempty. Modern browsers generally have borders around empty cells by default, as suggested in the CSS has both column and row headers, making the very first cell dummy. Dim blank as boolean = true For Each _row As DataGridViewRow In DataGridView1. Rows blank = True For i As Integer = 0 To _row. Cells. Count-1 If _row. Cells (i). Value IsNot Nothing AndAlso _row. Cells (i). Value <> "" Then blank = False Exit For End If Next If blank Then If Not _row. IsNewRow Then DataGridView1. Rows. Remove (_row) End If End If Next

Grid 2.0 in Webflow, Don't want to re-span your Navbar to fill all columns each time you add new columns? Want to keep your footer in the last row of the grid no matter how many rows� A common Grid Layout gotcha is when a newcomer to the layout method wonders how to style a grid cell which doesn’t contain any content. In the current Level 1 specification, this isn’t possible since there is no way to target an empty Grid Cell or Grid Area and apply styling. This means that to apply styling, you need to insert an element.

CSS Table Module Level 3, Columns are derived once all the rows have been specified: the first cell of the first row belongs to the first column and as many other columns as� So keep in mind, implicit columns and rows will take over for you if you have more content than grid cells. But, if you explicitly make grid cells from rows and columns, they will be there regardless of your content. Most importantly, put it into… Practice! From your command line, change branches to css-grid-dynamic-practice and look at the

CSS Empty-cells Property, Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to� The grid-template-rows property specifies the number (and the heights) of the rows in a grid layout. The values are a space-separated list, where each value specifies the height of the respective row.

Comments
  • No, CSS can't detect overflow etc so you need Javascript
  • Not knowing the number of columns is the killer here. With :nth-child and :last, you can detect if the row is full or not... You would need media queries to hide based on the number of colums.
  • thank you! I haven't seen the :empty selector before, intresting. However since I don't know the number of columns up front I can no render the HTML in this way.
  • Thank you Temani! Unfortunetly in my case I want to show another element directly below it, so hiding it by putting something in front does not work for me