Can I emulate flex-grow and flex-shrink with CSS Grid layout?

Question

Take a look at this behavior of footer__column selector made on flexboxes (you should look at big screen sizes at least of 1156px of wide)

CodePen: https://codepen.io/anon/pen/ZwwGMB?editors=1100 or

.footer {
  position: relative;
  z-index: 1;
  margin-top: 60px;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.footer__row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.footer__column {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  flex-grow: 1;
  align-content: flex-start;
  background-color: #F5F7FC;
  width: 0;
  min-width: 300px;
  padding: 10px;
  margin-right: 60px;
  margin-bottom: 40px;
}
.footer__side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.footer__text {
  padding-top: 5px;
  padding-bottom: 5px;
}

<div class="footer__floor">
    <div class="footer__inner">
        <div class="footer__row">
            <div class="footer__column">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>
              
            </div>
            <div class="footer__column">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>
            </div>
            <div class="footer__column">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>
            </div>
        </div>
    </div>
</div>

When the last column does not fit into the row it takes all available space at the next row below.

It becomes available because of flex-grow:1, min-width:300px; and flex-shrink:0.

I tried to find exactly the same solution on CSS-grid with no success. I tried to use the autofill property, but the column always takes the next cell.

CodePen: https://codepen.io/anon/pen/pGGJBb?editors=1100 or

.footer {
  position: relative;
  z-index: 1;
  margin-top: 60px;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.footer__grid {
  display: grid;
  grid-gap: 60px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 2fr));
  width: 100%;
}
.footer__column {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  flex-grow: 1;
  align-content: flex-start;
  background-color: #F5F7FC;
  width: 0;
  min-width: 300px;
  padding: 10px;
  margin-bottom: 40px;
}
.footer__side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.footer__text {
  padding-top: 5px;
  padding-bottom: 5px;
}

<div class="footer__floor">
  <div class="footer__inner">
    <div class="footer__grid">
      <div class="footer__column">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>

      </div>
      <div class="footer__column">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>
      </div>
      <div class="footer__column">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>
      </div>
    </div>
  </div>
</div>

I know it could be possible with media query and grid-template: span 2 property. But the thing is I do not want to write any additional media queries at all. I want to get the same automatic behavior as I did with flexboxes above.

So the question is: is it possible? If yes, could you provide the solution?

@Maliyshock I don't think that is not possible in CSS grid now... — kukkuz, Feb 19 '19 at 13:09
@kukkuz it might be so. It just sounds strange because there are so many things that CSS-grid's can do, and they can not do this simple thing which could be easily done by flexboxes. O_o — Maliyshock, Feb 19 '19 at 19:59
Maybe in the next spec we'll see new features like this. The fact is that CSS grid is designed for *grid layouts* while flexbox for 1D layouts. See [here](https://stackoverflow.com/questions/39454280/responsive-grid-layout-with-fixed-header-footer-and-scrollable-content) for an example where flexbox is beaten by CSS grids ;) — kukkuz, Feb 20 '19 at 02:55

Can I emulate flex-grow and flex-shrink with CSS Grid layout?

0 Answers0