I'm sure this has been answered before but I can't seem to get it working. I'm trying to horizontally center grid items with a display:grid parent. I've got a 12 column grid (76px column / 56px gap at full screen), with various column width child elements (for this example I'll just use span 8 1000px).
.main-container{
max-width:1528px;
margin: 0 auto;
}
.parent{
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-column-gap: 56px;
justify-items: center;
}
.grid-8{
grid-column: span 8;
background: red;
opacity: 0.6;
width: 100%;
}
<div class="main-container">
<div class="parent">
<div class="grid-8">8</div>
</div>
</div>
Also once the child element is centred is it possible for it to keep its width (1000px) until the .main-container starts to touch either side? once the browser starts to get pulled smaller (horizontally). Sorry, this is a little tricky for me to explain what I mean. The .main-container if the browser window is pulled in so this is at say 1200px wide the span 8 column will no longer be 1000px wide it will have shrunk (I'm guessing because it is relative to the main container size). But ideally, I'd like it to stay 1000px until the .main-container hits it and then the span 8 can start reducing in width.
Thanks
You can't align items in grid automatically with justify/align props.
You can try using grid-column-end: -N; syntax for each child nodes, but it's not best way to do that.
Much better to use flex - in this case you can align child nodes as you wish.
Anyway, if you want to continue working with grid, you can do something like this (like an option):
.main-container {
max-width: 1528px;
margin: 0 auto;
}
.parent {
--columns-amount: 12;
display: grid;
/*grid-template-columns: repeat(12, minmax(0, 1fr));*/
grid-template-columns: repeat(var(--columns-amount), 1fr);
grid-column-gap: 56px;
/*justify-items: center;*/
}
.grid-8 {
/* edit --column-size to see changes */
--column-size: 8;
grid-column: calc((var(--columns-amount) - var(--column-size)) / 2 + 1) / span var(--column-size);
background: red;
opacity: 0.6;
/*width: 100%;*/
}
/* flex */
.parent--flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.parent--flex>.grid-8 {
flex: 0 0 auto;
width: 66.66667%;
}
<div class="main-container">
<div class="parent">
<div class="grid-8">Grid</div>
</div>
</div>
<hr />
<div class="main-container">
<div class="parent--flex">
<div class="grid-8">Flex</div>
</div>
</div>
Related
I'm trying to create layout with two columns as nested grid with left grid having dynamic number of columns/width and right column with static width. Left grid can have many columns (from 0 to n) and right grid has static width. I want to center parent of these grids horizontally but adding justify-content: center causes overflow to clip some content of left grid
where I want it to work as here:
https://jsfiddle.net/4o8bkdtm/17/
Where is centered to the full width of the grid parent.
Reproduction
.grid {
background-color: #e2e2e2;
height: 400px;
display: grid;
overflow: auto;
grid-template-columns: max-content 400px;
justify-content: center;
}
.grid-1,
.grid-2 {
border: 1px solid #000000;
display: grid;
grid-template-columns: 1fr;
}
.grid-1 {
direction: rtl;
grid-auto-columns: max-content;
}
.grid-1>div {
width: 150px;
}
<div class="grid">
<div class="grid-1">
<div style="grid-column: 1; grid-row: 1;">first</div>
<div style="grid-column: 2; grid-row: 1;">second</div>
<div style="grid-column: 3; grid-row: 1;">third</div>
</div>
<div class="grid-2">
static width
</div>
</div>
Reproduction fiddle: https://jsfiddle.net/zLmxorgv/5/
The issue
The last column/padding in a grid disappears when overflow is present. We initially attempted to use padding on our grid. Looking into this question, we were able to confirm that it's not just us facing this challenge.
Unfortunately, the way our app is structured, we're unable to use the suggestions made by some of the answers to that question:
Right border: really more of a hack than a solution, does not work for us.
Pseudo-elements: same as above
What we have
We figured, why not try to place our grid inside another grid and "fake" the padding by making the container grid contain surrounding rows/columns to mimic padding?
It works well to ensure items are of correct width across multiple screen sizes:
3 columns, 2 rows on larger screens
2 columns, 3 rows on medium screens
1 column, 6 rows on smaller screens
It fails again, however, to maintain the last column/row in the grid even though it's specified in pixels. To see this effect, you will need to resize the screen (make it smaller) to show the overflow appear and the last column disappear.
html, body {
margin: 0px !important;
}
.gallery {
position: relative;
display: grid;
grid-template-columns: 22px [main] 1fr 22px;
grid-template-rows: 22px [main] 1fr 22px;
box-sizing: border-box;
align-items: stretch;
justify-items: stretch;
height: 100vh;
width: 100vw;
overflow: auto;
}
.visuals {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(32%, 1fr));
grid-area: main;
align-items: stretch;
justify-items: stretch;
width: 100%;
height: 100%;
gap: 22px;
}
.content {
width: 100%;
height: 100%;
background-color: #444;
color: white;
white-space: nowrap;
}
#media only screen and (max-width: 858px) {
.visuals {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
<div class="gallery">
<div class="visuals">
<div class="content">I have some content here that shouldn't be cut off.</div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</div>
Our confusion
According to the documentation:
The new fr unit represents a fraction of the available space in the
grid container.
So I would assume here that the explicitly defined 22px row/column would maintain its size and that 1fr would resize according to the remaining space. The last 22px row/column disappears altogether once the overflow appears.
The question
So, how can we ensure that the last column/row in a grid layout remains visible after the scrollbar appears?
Your problem is not that the outer grid isn't working ok.
The second column is dimensioned ok, but the content overflows it.
I have added overflow hidden in the snippet, and as afar as I can tell, it's working
html, body {
margin: 0px !important;
}
.gallery {
position: relative;
display: grid;
grid-template-columns: 22px [main] 1fr 22px;
grid-template-rows: 22px [main] 1fr 22px;
box-sizing: border-box;
align-items: stretch;
justify-items: stretch;
height: 100vh;
width: 300px;
overflow: auto;
box-shadow: inset 0px 0px 0px 22px red;
}
.visuals {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(32%, 1fr));
grid-area: main;
align-items: stretch;
justify-items: stretch;
width: 100%;
height: 100%;
gap: 22px;
opacity: 0.6;
}
.content {
width: 100%;
height: 100%;
background-color: lightgreen;
white-space: nowrap;
}
#media only screen and (max-width: 858px) {
.visuals {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
<div class="gallery">
<div class="visuals">
<div class="content">this is a long sentence that won't wrap and overflow</div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</div>
In the example below, the .grid-container div will stretch over the width of the body (that is, the viewport width), but its height will be the same as the .grid-item height.
Any explanations to why that is the case? I'm having trouble wrapping my head around it.
body {
width: 100vw;
height: 100vh;
}
.grid-container {
display: grid;
grid-template: 1fr / 1fr;
place-items: center;
}
<div class="grid-container">
<div class="grid-item">Grid item</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
}
.grid-container {
display: grid;
grid-template: 1fr / 1fr;
place-items: center;
background-color: red;
}
.grid-item {
background-color: blue;
}
<div class="grid-container">
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
</div>
as you can see what you are doing here is not a grid. It would be better if you use CSS flexbox instead of grid for one column grid.
just replace this code with grid-container class
display: flex;
flex-direction: column;
align-items: center;
justify-items: space-around;
and also note that every element of type div in HTML takes the whole width of the line and it's height is defined by the content inside it. It doesn't stretch all the way down to the bottom until you set a fixed height to it. you can set position: relative; to grid container parent and set its position to absolute. then add width: 100%; and height: 100%; to it.
add more information about your code for more detailed help.
After reading MDN's display page, I think I found the answer:
grid The element behaves like a block element and lays out its content according to the grid model.
The grid container by default behaves like a block element, which is why it will span the entire width of the parent when its size is not set explicitly. You can prevent this behavior and make it inline with display: inline grid or display: inline-grid (legacy).
body {
width: 100vw;
height: 100vh;
}
.grid-container {
display: inline grid;
grid-template: 1fr / 1fr;
place-items: center;
}
<div class="grid-container">
<div class="grid-item">Grid item</div>
</div>
I have a nav at the top of my page.
In it I have 5 market stocks for 5 different companies. I want to display the 5 at full width but as the window gets smaller, I basically want behavior which will cut off the ones that overflow, and resize the remaining ones to fill up the nav container (so let's say at some point it would only show 3 of the stocks and hide the others). Here is the code right now:
.stocks-container {
display: grid;
grid-template-columns: repeat(auto-fit, 150px);
grid-template-rows:1fr;
grid-auto-rows: 0;
overflow-y: hidden;
justify-content: space-between;
width: 75%;
font-size: 11px;
overflow-y: hidden;
}
What this does currently is almost what I need. The problem is that now the stock items that overflow, and should basically create a new row, get mushed on top of the first row. Again, I don't want them to create a new row, or be scrollable. I just don't want them to be showing at all. Any ideas?
You can use CSS max-height and #media queries to achieve this effect:
Give the .stocks-container a max-height which corresponds with the height of a single grid row and declare overflow: hidden
This ensures that there will now only ever be a single row visible (ie. no vertical wrapping of rows).
Now add a short series of break-point media queries to reset grid-template-columns as percentages of the viewport width.
This enables those grid boxes which are still visible to fill the entire horizontal width reserved for the .stocks-container.
Working Example:
.stocks-container {
display: grid;
grid-template-columns: repeat(5, calc(20% - 6px));
grid-template-rows: 92px;
grid-column-gap: 6px;
grid-row-gap: 6px;
max-height: 92px;
font-size: 11px;
overflow: hidden;
}
.stocks-container div {
height: 80px;
text-align: center;
border: 1px solid rgb(127, 127, 127);
}
#media only screen and (max-width: 900px) {
.stocks-container {
grid-template-columns: repeat(4, calc(25% - 6px));
}
}
#media only screen and (max-width: 750px) {
.stocks-container {
grid-template-columns: repeat(3, calc(33.33% - 6px));
}
}
#media only screen and (max-width: 600px) {
.stocks-container {
grid-template-columns: repeat(3, calc(50% - 6px));
}
}
<div class="stocks-container">
<div>
<h2>Company 1</h2>
<p>Company Stock</p>
</div>
<div>
<h2>Company 2</h2>
<p>Company Stock</p>
</div>
<div>
<h2>Company 3</h2>
<p>Company Stock</p>
</div>
<div>
<h2>Company 4</h2>
<p>Company Stock</p>
</div>
<div>
<h2>Company 5</h2>
<p>Company Stock</p>
</div>
</div>
I have a CSS Grid inside a Flexbox column, and the grid has flex-grow: 1.
In Chrome, the grid expands to fill available space, but its content does not, even with align-content: stretch on the grid. In Firefox and Edge, the content expands to fill the grid's height, as desired.
Here's a pen that reproduces the problem, and images of how it looks in different browsers. Is this a bug with Chrome, and if so, can anyone suggest a straightforward workaround?
Chrome
Firefox
Edge
#wrapper {
display: flex;
flex-direction: column;
height: 15rem;
background-color: #aaa;
}
#grid {
flex-grow: 1;
display: grid;
background-color: #ccf;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
align-content: stretch; /* "end" correctly puts the row to the bottom */
}
#left {
background-color: #fcc;
}
#right {
background-color: #cfc;
}
<div id="wrapper">
<div id="top">not in grid</div>
<div id="grid">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>
Is this a bug with Chrome, and if so, can anyone suggest a straightforward workaround?
It looks like a bug in Chrome. But I can't say for sure.
Here's what's happening:
You have the flex item grid container set to consume all available height with flex-grow: 1
Because you've only defined the flex-grow property, the other two flexibility properties – flex-shrink and flex-basis – remain at their default values.
The default value of flex-shrink is 1, and is not pertinent to this problem.
The default value of flex-basis is auto, and is the source of the problem.
If you add flex-basis: 0 to your code, the item takes full height in Chrome, as well.
revised codepen
#wrapper {
display: flex;
flex-direction: column;
height: 15rem;
background-color: #aaa;
}
#grid {
/* flex-grow: 1; */
flex: 1; /* fg:1, fs:1, fb:0 */
display: grid;
background-color: #ccf;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
#left { background-color: #fcc; }
#right { background-color: #cfc; }
<div id="wrapper">
<div id="top">not in grid</div>
<div id="grid">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>