0

What I intend to achieve is something that looks as follows:

enter image description here

Where the header spans the full width of the container, where there can be 3 or 4 columns having the same width in the second row, and where the footer has the same width as the first column.

I thought I could achieve this with the following HTML and CSS code, but no. grid-column-end is giving me headaches. If I set it to 5, it looks as I want in the case that there are four items in the second row, but not if there are only 3, in which case grid-column-end should be 4. Hence, the solution of using -1, which refers to the last grid-line, but then a grid containing something like 40 columns is created.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-gap: 10px;
  width: 100%;
}

.header {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row: 1;
  background-color: #bbb;
  padding: 20px;
}

.item {
  background-color: #ddd;
  border: 1px solid #aaa;
  padding: 20px;
  grid-row: 2;
}

.footer {
  grid-column: 1 / 2;
  grid-row: 3;
  background-color: #bbb;
  padding: 20px;
}
<div class="container">
  <div class="header">Header</div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="footer">Footer</div>
</div>
Jean-François Beauchamp
  • 5,485
  • 8
  • 43
  • 77
  • Does this answer your question? [Make a grid item span to the last row / column in implicit grid](https://stackoverflow.com/questions/44052336/make-a-grid-item-span-to-the-last-row-column-in-implicit-grid) – K i Feb 18 '23 at 19:21
  • with your configuration you are forcing the grid to create as much column as possible. `repeat(auto-fit, minmax(10px, 1fr))` --> will give you the maximum number of columns with 10px width – Temani Afif Feb 18 '23 at 19:46
  • It looks like a similar question. It seems to have to do with implicit and explicit templates. I did not find the reason why the browser is not able to figure out the number of columns however. This answer though put me on the right track: https://stackoverflow.com/questions/55281598/css-grid-maximum-number-of-columns-without-media-queries. – Jean-François Beauchamp Feb 18 '23 at 19:59
  • @Temani Afif Thanks for your answer. I understand better now. I also tried with `grid-template-columns: repeat(auto-fit, 1fr);` which I thought should give me columns all of the same width, but no, the first column was wider than the remaining ones, and I noticed it had to do with the content of the header and footer. So the size of the div contents seem to matter. – Jean-François Beauchamp Feb 18 '23 at 20:18
  • `repeat(auto-fit, 1fr)` is an invalid value. What you have to do is to increase the 10px. Use something like 300px to have `repeat(auto-fit, minmax(300px, 1fr))` – Temani Afif Feb 18 '23 at 20:27
  • @Termani Afif That did not work unfortunately. It does not give me 3 or 4 columns having the same width and a header filling the whole width. Maybe what I am asking for is not possible with an implicit number of columns. – Jean-François Beauchamp Feb 18 '23 at 20:40
  • The best solution I found until now to achieve to layout I want is to take the header out of the grid layout. – Jean-François Beauchamp Feb 18 '23 at 20:44

0 Answers0