Menu
Is there an analog to flex-grow for the grid property ?
I'd like my grid areas to accomodate the content they receive but have some areas take more place than others like flex-grow for flex.
Practically, in the example below I'd like
turquoise to be invisible because it accomodates its content. footer to be invisible as well because it has no content. flex-grow.More practically, I'd like this code:
.ctnr { display: grid; min-height: 100vh; grid-template-areas: "header header" "nav main" "footer footer"; } .test { background: black; height: 1rem; } header { grid-area: header; background: turquoise; } nav { grid-area: nav; background: grey; } main { grid-area: main; } footer { grid-area: footer; background: yellow }<div class="ctnr"> <header> <div class="test"></div> </header> <nav></nav> <main></main> <footer></footer> </div>To act like this code:
.ctnr { display: flex; flex-direction: column; height: 100vh; } .panel { flex-grow: 1; display: flex; } header { flex-grow: 0; background: turquoise; } nav { min-width: 10rem; background: grey } footer { background: yellow }<div class="ctnr"> <header>hey</header> <div class="panel"> <nav></nav> <main></main> </div> <footer></footer> </div>Without the div.panel and without adding any additional tag.
The reason I would like to do this, is a legitimate one, that extra div element is annoying me.
822
CSS Grid and Flexbox are layout models that share similarities and can even be used together. The main difference is that you can use CSS Grid to create two-dimensional layouts. In contrast, you can only use Flexbox to create one-dimensional layouts.
Grid and flexbox. The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time.
CSS grids are for 2D layouts. It works with both rows and columns. Flexbox works better in one dimension only (either rows OR columns). It will be more time saving and helpful if you use both at the same time.
CSS flexbox and grid can be used for creating website layouts and positioning items on a web page.
The flex-grow property specifies how much the item will grow relative to the rest of items of the flex container. If all items of the container are specified by the flex-grow factor, then all items share the available space.
CSS Grid focuses on precise content placement. Each item is a grid cell, lined up along both a horizontal and a vertical axis. If you want to accurately control the position of items within a layout, CSS Grid is the way to go. The W3 docs of the Grid module assert:
All Bootstrap 4 sites out there makes use of flexbox to accomplish two-dimensional layouts , consisting of rows and columns. And, there are other popular tools such as Flexbox Grid that do the same. The most common misconception about the two layout modules is that Grid is for full-page layouts and flexbox is for smaller components.
CSS Grid offers the fr unit, which functions similarly to flex-grow.
While flex-grow distributes free space in the container among flex items, the fr unit distributes free space in the container among rows / columns.
From the spec:
7.2.3. Flexible Lengths: the
frunitA flexible length or
<flex>is a dimension with thefrunit, which represents a fraction of the free space in the grid container.
(Note that flex-grow is applied to flex items, while fr lengths are applied to grid containers.)
So in your grid, you have three rows:
The first row is the header. You want the content to set its height. So its height is set to auto.
The last row is the footer. You want the content to set its height. So its height is set to auto.
The middle row contains the nav and main elements. You want this row to occupy all remaining vertical space. So its height is set to 1fr.
.ctnr { display: grid; grid-template-rows: auto 1fr auto; /* key rule */ grid-template-columns: 1fr 1fr; height: 100vh; grid-template-areas: "header header" "nav main" "footer footer"; } header { grid-area: header; background: turquoise; } nav { grid-area: nav; background: grey; } main { grid-area: main; background: orange; } footer { grid-area: footer; background: yellow; } body { margin: 0; }<div class="ctnr"> <header>header</header> <nav>nav</nav> <main>main</main> <footer>footer</footer> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
