CSS grid with flex basis?
You can combine what you have with min()
and 100vw
. Less than 100vw
to avoid unwanted overflow and the 1fr
will do its job filling the remaining space. Any value bigger than 50vw
will do the job
.container {
display:grid;
grid-template-columns: repeat(auto-fill, minmax(min(400px,80vw), 1fr));
grid-gap:10px;
}
.container div {
height:50px;
background:red;
}
body {
margin:0;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Does CSS Grid have a flex-grow function?
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
fr
unitA flexible length or
<flex>
is a dimension with thefr
unit, 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
andmain
elements. You want this row to occupy all remaining vertical space. So its height is set to1fr
.
.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>
Simulate flex-direction:row using display:grid
Use grid-auto-flow: column;
on the id
#items
with your grid display. This is equivalent to flex-direction: row;
when using flex
.
.item {
width: 50px;
height: 50px;
flex-basis: 50px;
flex-grow: 0;
flex-shrink: 0;
background: orange;
margin-right: 10px;
}
.item:last-child {
margin-right: 0;
}
#items {
display: grid;
grid-auto-flow: column;
padding: 10px;
margin: 10px;
border: 2px solid red;
width: fit-content;
}
<div id="items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
css grid element inside flex element doesn't overflow container
This style is wrong
ninja-manager .ninja-manager__not-active__inner {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 30px;
}
Since it gives to the columns 50% of the total width, and on the other hand you are setting a gap between columns. The total width that you have used is greater than the width available.
Change it to this, where you are using the available space after taking into account the gaps:
ninja-manager .ninja-manager__not-active__inner {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 30px;
}
forked codepen
Grid Property Similar to Flex-Grow
You can rely on 1fr
to fill the remaining space:
body { display: grid; grid-template-rows: auto 1fr auto; margin: 0; height: 100vh;}
header { padding: 15px; font-size: 1rem; background: red;}
main { background: green; overflow:auto; padding:10px;}
footer { padding: 15px; font-size: 1rem; background: blue;}
<header>this is a header</header><main>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean enim nulla, tincidunt at laoreet sed, sodales a arcu. Cras cursus diam eget diam venenatis egestas. Sed in massa pharetra, malesuada felis et, posuere nisl. Etiam eget mauris suscipit, consequat leo in, tincidunt lectus. Morbi pellentesque accumsan lectus sed finibus. Vivamus eros mi, eleifend vitae nibh id, vulputate posuere nulla. Integer dictum justo non nunc tincidunt, lacinia faucibus nisl vestibulum. Mauris luctus ultrices diam, at malesuada sem. Curabitur auctor, mauris in fermentum vestibulum, libero velit molestie leo, ut placerat velit ligula vel mauris. Integer tortor purus, sagittis vel libero sed, egestas vehicula velit. Mauris ullamcorper, arcu at facilisis vehicula, lectus lacus scelerisque felis, ut mattis dolor justo ac tellus.
Fusce porttitor turpis eget felis vestibulum viverra. Sed hendrerit nisl interdum tortor suscipit convallis. Donec aliquet massa sapien, ac congue lacus ullamcorper sed. Donec felis lectus, fermentum ut vestibulum sit amet, mattis ac ipsum. Etiam ut purus libero. Mauris maximus sem at ex posuere, at venenatis nisi sollicitudin. Vestibulum consequat sem risus, vitae sodales augue rutrum venenatis. Vivamus varius, lectus consequa</main><footer>this is a footer</footer>
How to create a flexbox grid with a column span and spacing between elements
This looks to me like a three column grid with the fourth item spanning two colums.
Here's a simplified version. Obviously you'll want to style the items as you need them.
#flexContainer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
height: 200px;
width: 600px;
}
#flexContainer>* {
background-color: red;
}
.twoThirdsElement {
grid-column: auto / span 2;
}
<div id="flexContainer">
<div>
</div>
<div>
</div>
<div>
</div>
<div class="twoThirdsElement">
</div>
<div>
</div>
</div>
Related Topics
CSS Not Working on Django Password Form Field
Rotate Text and Shrink Its Container to the New Width
CSS Perspective Not Working in Firefox
How to Create a 'Parallelogram' Shape in CSS with a Straight Side
How to Use Data Attributes with Font Awesome
Set Div Height Equal to Screen Size
Why Is My CSS Media Query Being Ignored or Overridden
How to Set an Input Width to Match The Placeholder Text Width
Global Disable Magnifying Glass on iOS 9 in Meteor Cordova App
CSS Attribute Selector + Descendant Gives a Bug in Webkit
Css: Scale Background Image Down If Larger Than Window, Keep at 100% Otherwise
CSS - Fonts Render Differently in Firefox and Chrome