Building a Grid System w/CSS Grid - Collapsing Cell Problems

Question

1

I am building a Grid System using CSS Grid and I am having a bit of difficulty. I have a shrink class that works as it is supposed to, but I would like the rest of the cells(as I call them) to fit the space in css grid. If I set .cell.shrink to grid-column:auto, is there a way to have the other cells fit the space?

2

Also, if you notice the code below, I have a class for .cell > * {whitespace:nowrap;}. Without it my links are collapsing. Is there a better way to keep it from collapsing? I just want the cell to fit the content without collapsing. I don't want to set a static value in the minmax() function either --- Example of what I DON'T want (minmax(100px, 1fr)). Again, I am trying to use css grid for this. I know flexbox just fits to the content. How can I achieve with css grid?

Below is the code I have tried.

CODEPEN LINK

https://codepen.io/Jesders88/pen/djmwNY

HTML

<div class="container">
  <div class="row">
    <div class="cell medium-3 shrink">
        <nav>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </nav>  
    </div>
    <div class="cell medium-3">CellCellCellCellCell</div>
    <div class="cell medium-3">Cell</div>
    <div class="cell medium-3">Cell</div>
  </div>
</div>

Grid CSS

.row {
    display:grid;
    grid-gap:120px;
    grid-template-columns:repeat(12, 1fr);
}

TRIED CSS

.shrink {
    grid-column:auto !important;
}

.row {
    max-width:1600px;

    > .cell {

        * {
            white-space:nowrap;
        }
    }
}

`.row { grid-template-columns: repeat(12, minmax(auto, 1fr))` ? — Michael Benjamin, Aug 02 '18 at 00:51
Without `white-space: nowrap` your cells will collapse because of the large `grid-gap: 120px` you have set. That's a fixed length, and will collapse anything in its way that is collapsible. `white-space: nowrap` holds them firm. — Michael Benjamin, Aug 02 '18 at 00:57
@Michael_B if I were to set a grid gap of rems or something like that would that fix the issues? — justin.esders, Aug 02 '18 at 00:59
You had 0. I switched to auto. Checking to see if that's what you needed. — Michael Benjamin, Aug 02 '18 at 00:59
@Michael_B that isn't working either. Converted the px to rems and to a percentage and both still make the a links break. :/ — justin.esders, Aug 02 '18 at 01:43
Btw, I see nothing wrong with using `white-space: nowrap`. If it works in your layout, why not use it? It's worked for others: https://stackoverflow.com/q/47452362/3597276 — Michael Benjamin, Aug 02 '18 at 01:46
Ok. I just didn't know if there was a better way to handle it, that was all. I think the white-space:nowrap is the best option in this case. — justin.esders, Aug 02 '18 at 01:55

Building a Grid System w/CSS Grid - Collapsing Cell Problems

1

2

0 Answers0