Forcing a column to be empty in a responsive grid layout
On trick is to make the first element to span all the first column by defining a big number of rows but you have to do slight changes to the grid definition in order to achieve this like removing the vertical gap and the grid-auto-rows
.grid { display: grid; grid-template-columns: 5rem repeat(auto-fit, minmax(20rem, 1fr)); grid-column-gap: 1rem; /* Only column gap here */ width: 95%; margin: 0 auto;}
.item { display: flex; padding: 1rem; justify-content: center; background: lightblue; height:10rem; /*to replace the auto-row*/ margin-bottom:1rem; /* To replace the gap*/}
.search { grid-column: 1; grid-row: 1/300; /* big number here */ height:calc(2*10rem + 1rem); /* consider one gap in the total height*/}
* { box-sizing:border-box;}<div class="grid"> <div class="item item-1 search">Search</div> <div class="item item-2">Item 2</div> <div class="item item-3">Item 3</div> <div class="item item-4">Item 4</div> <div class="item item-5">Item 5</div> <div class="item item-6">Item 6</div> <div class="item item-7">Item 7</div> <div class="item item-8">Item 8</div> <div class="item item-9">Item 9</div></div>Empty columns in responsive grid?
Mayor browsers ignore width for empty divs, a simple way to avoid this behavior is adding to empty divs.
<div> </div>
CSS grid empty cells layout issue
They are not bunched up on the top right, they are bunched up on the rightmost column.
Grid areas must be rectangular, not any other shape. The periodic table's layout is not rectangular, sadly.
Additionally, setting an element's grid-area will make it cover the whole area, not just one cell of it.
This causes the elements to bunch to the right, because the last column does form a rectangle.
If you want to auto-layout the elements, you could take the inverse approach, and define a bunch of "whitespace" rectangular areas, and put some elements there so they are ruled out of automatic flow.
Such an example:
/* backgrounds and spacings not needed, just there to enhance visualization of each element's boundaries.*/
.element { margin: 2px; padding: 5px; border: 1px solid gray;}
.spacerA { background: dodgerblue; grid-area: wa;}
.spacerB { background: aqua; grid-area: wb;}
.spacerC { background: skyblue; grid-area: wc;}
.wrapper { display: grid; grid-template-columns: repeat(18, 1fr); grid-template-areas: '. wa wa wa wa wa wa wa wa wa wa wa wa wa wa wa wa .' '. . wb wb wb wb wb wb wb wb wb wb . . . . . .' '. . wb wb wb wb wb wb wb wb wb wb . . . . . .' '. . . . . . . . . . . . . . . . . .' '. . . . . . . . . . . . . . . . . .' '. . wc . . . . . . . . . . . . . . .' '. . wc . . . . . . . . . . . . . . .';}<div class="wrapper"><div class="spacerA"></div><div class="spacerB"></div><div class="spacerC"></div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div><div class="element">El</div></div>display grid empty div as spacer?
From the comments from the original question, I was able to find the grid-column-start property and that was exactly what I needed. I appreciate everyone commenting but I feel like the ones saying to use a library/frameworks to build a navbar is overkill. Knowing how to actually build these layouts are what makes you a better developer.
This is what I ended up doing:
<div class="navbar">
<div class="navbar--content">
<div class="navbar--content--middle">
<div class='row row__align-center row__center'>
<a href="#">shop now</a>
<a href="#">logo</a>
<a href="#">FAQ</a>
</div>
</div>
<div class="navbar--content--right">
<a href="#">user img</a>
<a href="#">bag</a>
</div>
</div>
</div>
And the css:
.navbar {
&--content {
padding: 20px 0;
display: grid;
grid-template-columns: 200px auto 200px;
align-items: center;
&--middle {
grid-column-start: 2;
a {
width: 100px;
text-decoration: none;
font-weight: 600;
&:first-child {
margin-right: 100px;
}
&:nth-child(2) {
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
&:last-child {
margin-left: 100px;
}
}
}
&--right {
text-align: right;
a {
&:first-child img {
height: 30px;
margin-right: 10px;
}
&:last-child img {
height: 35px;
}
}
}
}
}
How to span to the last column in an implicit grid?
Why shouldn't it work on implicit grids?
Because we can easily run on undefined cases1 or a cyclic dependency. If it was the implicit grid, it means that we need to first place all the others element to identify the implicit grid then we place our element BUT if we place our element we will obtain another implicit grid so technically you cannot know the implicit grid without placing the element.
The idea behind the implicit grid is to place the element that doesn't have anything defined for their placement automatically after placing the ones with known places.
You can overcome this by using some hacks either for row or column:
Stretch an element to the end of the automatically calculated grid, not just the explicit grid
Forcing a column to be empty in a responsive grid layout
1 A basic example:
.grid { display: grid; grid-template-columns: 50px; grid-gap: 5px; grid-auto-flow: column; grid-auto-columns:50px;}
.grid>span { height: 50px; background: red;}
.grid>span.place { grid-column: 1 / -1; background: blue;}<div class="grid"> <span></span> <span class="place"></span></div>Responsive CSS Grid with persistent aspect ratio
You could take advantage of the fact that padding in percentages is based on width.
This CSS-tricks article explains the idea quite well:
...if you had an element that is 500px wide, and padding-top of 100%,
the padding-top would be 500px.Isn't that a perfect square, 500px × 500px? Yes, it is! An aspect
ratio!If we force the height of the element to zero (height: 0;) and don't
have any borders. Then padding will be the only part of the box model
affecting the height, and we'll have our square.Now imagine instead of 100% top padding, we used 56.25%. That happens
to be a perfect 16:9 ratio! (9 / 16 = 0.5625).
So in order for the columns to maintain aspect ratio:
Set the column widths as you suggested:
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))Add a pseudo element to the items to maintain the 16:9 aspect ratio:
.item:before {
content: "";
display: block;
height: 0;
width: 0;
padding-bottom: calc(9/16 * 100%);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
grid-template-rows: 1fr;
grid-gap: 20px;
}
.item {
background: grey;
display: flex;
justify-content: center;
}
.item:before {
content: "";
display: block;
height: 0;
width: 0;
padding-bottom: calc(9/16 * 100%);
}<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>How to force a fixed column width with a Bootstrap grid and keep the other ones fluid
Bootstrap's grid were meant to be fluid so they're supposed to change as the screen changes size.
For your desired layout, you can make it happen using display: flex or display:table instead. I'm going to go with display:table for my example since there's more support for it than the flexbox.
You will need to change your HTML to something like:
<div class="page">
<div class="page-content">
<div class="row">
<div class="col-md-2">
<div class="blue">test</div>
</div>
<div class="col-md-10">
<div class="green">test</div>
</div>
</div>
</div>
<div class="sidebar">
<div class="gold">test</div>
</div>
</div>
And here's the CSS I used:
.page {
display: table;
width: 100%;
}
.page-content,
.sidebar {
display: table-cell;
}
.sidebar {
width: 330px;
}
.blue,
.green,
.gold {
height: 50px;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.gold {
background-color: gold;
}
You can checkout the fiddle here: https://jsfiddle.net/m0nk3y/qjutpze4/
How to refer to end of grid with implicit grid layout?
As of October 2020, no known solution exists. Even if some browser did implement some new feature in near future, it cannot be safely used in years until the majority of all internet users have upgraded their browsers.
Related Topics
Chrome Ignoring Flex-Basis in Column Layout
How to Round-Off an Image with CSS
How to Remove the Underline of a Link in Chrome Using CSS
How to Center One of the Flex/Grid Children(More Than Three) and with Different Widths
How Element Selector Is More Specific Than Id Selector
Width Transitioning from Fixed Size to "Auto" Using CSS Without JavaScript
Breaking to a New Line with Inline-Block
Sass --Watch with Automatic Minify
How to Remove the Arrow in Dropdown in Bootstrap 4
CSS Opacity Affecting Sibling Image Opacity
Returning Generated CSS from an MVC5 or Web API 2 Controller Action
How to Add Tableview Footer in Javafx Tableview
Should I Remove Vendor Prefixes
Use Images in CSS Files with Reactjs
Css3 Automatic Word Hyphenation Works on Firefox, Not on Internet Explorer and Chrome
Css: How to Adjust My Font Size Fill All the Space in a Justified Layout