All Questions
Tagged with grid-layout css-grid
183
questions
337
votes
3
answers
303k
views
Prevent content from expanding grid items
TL;DR: Is there anything like table-layout: fixed for CSS grids?
I tried to create a year-view calendar with a big 4x3 grid for the months and therein nested 7x6 grids for the days.
The calendar ...
- 14k
251
votes
2
answers
373k
views
Equal height rows in CSS Grid Layout
I gather that this is impossible to achieve using Flexbox, as each row can only be the minimal height required to fit its elements, but can this be achieved using the newer CSS Grid?
To be clear, I ...
- 3,501
110
votes
4
answers
297k
views
How do I specify row heights in CSS Grid layout?
I have a CSS Grid Layout in which I want to make some (middle 3) rows stretch to their maximum size. I'm probably looking for a property similar to what flex-grow: 1 does with Flexbox but I can't seem ...
- 3,850
76
votes
6
answers
51k
views
How to make the items in the last row consume remaining space in CSS Grid?
Is there a way to force all the items in the last row, of a grid, to fill the row, no matter how many they are?
I do not know the number of items that will be in the grid so I cannot target them ...
- 1,441
45
votes
2
answers
38k
views
Is it possible to place more than one element into a CSS-Grid-Cell without overlapping?
I have three columns and one row and I want to place each grid-element into one of the three resulting cells. This is what I want, using three container-elements:
main {
display: grid;
grid-...
- 553
36
votes
3
answers
18k
views
A way to count columns in a responsive grid
Although I have not yet been able to find an answer, the question is simple: Is there a way, other than brute force, to count the number of columns in a responsive grid?
#grid-container {
width: ...
- 5,771
34
votes
8
answers
68k
views
How to make a fixed column in CSS using CSS Grid Layout?
I've made a simple site with a #container div that is parent to two divs: #left and #right, by using Grid Layout:
Is there any way to make the left column fixed? I'd like the left text to persist on ...
- 426
33
votes
2
answers
6k
views
Grid layout on <fieldset>... Bug on chrome?
From my decades-long experience of hand-coding HTMLs, I have learnt that <form>, <fieldset> are just block-level elements like <div>. CSS-wise, they behave just the same in terms of ...
- 1,096
30
votes
3
answers
81k
views
How to create a CSS Grid Layout box that spans 2 columns and 2 rows?
I've created a grid layout following the newest CSS Grid spec, but am not completely familiar with it yet. I'm trying to create the following layout without having to define grid areas for each grid ...
- 876
30
votes
4
answers
18k
views
How is "grid-template-rows: auto auto 1fr auto" interpreted?
Recently, I created a layout using CSS grid. While this works well, I'm confused by how it works. Specifically, I'm confused about the line grid-template-rows: auto auto 1fr auto;.
What ended up ...
user8370684
27
votes
2
answers
12k
views
What is an alternative to css subgrid?
I'm working on a page with a pretty simple layout - basically a data table, but using grid layout so that the columns will adjust nicely depending on content size. I want to make the rows sortable (...
- 597
26
votes
4
answers
32k
views
CSS grid: content to use free space but scroll when bigger
I've been working with CSS Grid Layouts for the first time and they're awesome. Right now, however, I'm having trouble keeping one of my grid cells under control.
What I want is to have an element ...
- 5,028
23
votes
4
answers
45k
views
CSS: display: grid and/or -ms-grid
Is there a way to use both or either display: grid/-ms-grid into one style sheet or do I have to use an HTML hack or JavaScript to query what type of browser a page is being viewed with grid layout?
...
- 415
22
votes
2
answers
27k
views
Make a div span two rows in a grid
I have a page full of blocks which pile up with display: inline-block. I want to make some four or two times bigger, so I used float: left or right to put other blocks around.
My problem is if I have ...
- 1,428
18
votes
1
answer
23k
views
Set css grid child element's size on the grid, without specifying what column or row it should go into
Is it possible do set a div's height and width in amount of rows/columns they should span, without specifying exactly which columns or rows they should go into?
For example, if I have two classes, ...
- 315
17
votes
3
answers
44k
views
How can I make a div span multiple rows and columns in a grid?
Building off of a previous question, I'm trying to add bigger blocks to my grid layout. In the last question, I needed to have a div span multiple rows. The problem now is that I need a div to span ...
- 1,428
17
votes
3
answers
11k
views
How to make an element fill the remaining viewport height?
I'd like to use CSS Grid. Something like this I think…
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto auto [whatever's left of the vh] auto auto;
...
- 320
17
votes
1
answer
15k
views
CSS grid layout: support grid-area for IE11
Сan someone tell me how to make this example work in ie11? I checked the documentation and -ms- prefix did not help
#page {
display: -ms-grid;
display: grid;
width: 100%;
height: 250px;
...
- 2,123
17
votes
1
answer
11k
views
CSS grid, remove gap when area is optional
I'm starting using CSS grid (pretty amazing!). I'm starting with the most basic layout: mobile layout. Also, I'm using media queries to change the layout as the web page grows.
For now, my layout ...
- 2,707
15
votes
1
answer
41k
views
CSS grid items based on minimum width and percentage
I currently have a div style as a grid display. The grid-template-columns are each 1/3 of the body. However, I would like to limit each box to a minimum width of, say, 200px. This way, on mobile I won'...
- 414
15
votes
4
answers
15k
views
Masonry layout with css grid
I'm trying to create masonry layout using css grid layout. All items in grid have variable heights. And I don't know what items will be. So I can't define grid-row for each item. Is it possible to ...
- 395
12
votes
3
answers
16k
views
Specify the columns to start from the right with CSS Grid
I'm trying to change my Flexbox layout to the new display: grid, and I have three columns.
<div class="grid">
<div class="three wide column"></div>
<div class="two wide ...
- 1,840
10
votes
1
answer
14k
views
How to get items to stretch to fill width?
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-gap: 3px;
border: 1px solid green;
}
.item {
border: 1px solid red;
height: 50px;
}
<div ...
- 277k
9
votes
2
answers
7k
views
How do make columns in a grid "space-evenly" like with flexbox?
I have this grid CSS
.grid {
display: grid;
grid-column-gap: 50px;
grid-template-columns: repeat(3, 1fr);
}
which is sitting in a div with width: 500px
but I noticed that the first item ...
- 7,241
9
votes
2
answers
58k
views
Padding to CSS Grid
I am a beginner to HTML and CSS, so I've been experimenting with the different systems like Flex and CSS Grid. I've run into an issue where I can't add padding to an element inside a Grid Column. Is ...
- 420
9
votes
1
answer
6k
views
CSS how to only show 1 row and hide the others?
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 ...
- 397
8
votes
2
answers
4k
views
Make elements wrap in groups, not one by one
I have six inline, fixed-size elements and would like to wrap them so that each row has the same number of elements. So with a wide container, there would be 1 row with 6 columns / elements. As the ...
8
votes
1
answer
23k
views
Shrink grid items just like flex items in css
Is it possible to shrink grid items just like flex items in css?
Grid items
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
....
8
votes
4
answers
11k
views
Prevent grid items from expanding when content is added
I'm trying to create a layout where the screen is divided into some number of equally-sized cells. When I fill one of the cells with content, it stretches to be larger than the other cells, even ...
- 5,230
7
votes
3
answers
11k
views
Making the content inside grid items equal height in CSS Grid
I am trying to figure out how to get two columns of my grid the same height. Here is what I am after:
xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx
x qqqqqqqqqqqqq x x qqqqqqqqqqqqqqq x
x ...
- 387
7
votes
1
answer
15k
views
Centering columns in CSS Grid
I'm trying to create a simple css grid using the native CSS Grid properties. It works as I wanted, except I want to create a utility class that can center a column in a grid.
Is there a way to create ...
- 2,340
7
votes
2
answers
12k
views
CSS Grid Layout with Max-Width, Centered Content
I'm in the midst of learning CSS Grid (long overdue, I know). I've challenged myself to convert a relatively standard float-based layout to a grid, but can't figure out this last part.
My goal is to ...
- 61.2k
6
votes
2
answers
37k
views
css grid-template-areas property not aligning grid items [duplicate]
I am new to css grids, and I am trying to build a page with this layout:
The problem I have is the .main class and the grid inside the container grid.
I think I have the wrong setup for the grid in ....
- 1,515
6
votes
1
answer
3k
views
How to make a CSS GRID, with uneven column widths, responsive?
I have created a CSS GRID and each row has 2 columns. The first column takes up 25% of the width and the second column takes up 75%. I have achieved this using
.grid-container{
...
- 93
6
votes
2
answers
537
views
Wrap CSS grid with auto placement
I'm trying to build a grid that contains card-like items. The cells of each type (headline, image, text, button, ...) should have equal height in each row, determined by the content of the largest ...
- 6,695
6
votes
1
answer
3k
views
CSS Grid Layout - Make an item span as many column as needed
I want to use a CSS-Grid-Layout (ideally with an explicit column-grid).
And I would like to have a flexible item that absorbs any extra space along the x axis / spans as many columns as are not used ...
- 63
4
votes
2
answers
3k
views
Grid with viewport height and inner scrolling div
I'm trying to create a layout that uses a grid that takes up the entire browser viewport (height: 100vh) and then allows a div within one of the grid items to scroll in the Y dimension.
Here's some ...
- 15.6k
4
votes
2
answers
7k
views
css-grid 2x2 or 2x3 layout, depending on number of items
Consider a schedule with a variable number of items, anywhere between 1 and 6.
If there are 1 - 4 items, they should cover a 2x2 layout, like:
ONE TWO
THREE FOUR
If there are 5 - 6 items, they ...
- 158
4
votes
4
answers
1k
views
What kind of display are the direct child elements of a container using display: grid?
If there is just a p tag in the HTML that has a background color of blue, and has margin: auto, then it takes up the width of the page, and the width and padding can be changed, like an inline-block.
...
user11071538
4
votes
1
answer
10k
views
Why are my css grid items overlapping when arranged in a particular layout?
I am a noob trying to learn css grid layout. I'm trying to create a grid-layout using grid-template-areas.
However,the items keep overlapping because I have to explicitly specify the height of the ...
4
votes
1
answer
4k
views
Why are empty columns not collapsing in CSS Grid?
I have started learning CSS Grid from yesterday and I have a doubt.
I was reading about how can I use auto-fit to place the elements evenly in the rows from this website.
The post says that
auto-...
- 703
4
votes
2
answers
1k
views
CSS Grid - Transitioning from 1 row, 3 col to 3 row, 1 col
I'm exploring CSS Grid to see if it can completely replace the need for responsive CSS media queries for my specific use case. I have the following grid container:
.gridContainer {
display: grid;...
- 311
4
votes
2
answers
87
views
I can't get grid-template-areas to work in html
I'm trying to use grid-areas to have a 30%/70% split in a box with an image on the left and text on the right, but they keep overlapping and I don't know how to fix it. Image isn't showing up in ...
- 41
4
votes
1
answer
386
views
CSS - Make an item start in the middle of previous row
I'm trying to use CSS Grid to have a div that starts in the middle of the div in the row above. I want both divs to wrap around the text. This is what I'm trying to achieve:
As you see on the picture,...
- 201
4
votes
1
answer
1k
views
With CSS Grids, is there a way to wrap the implicit grid when using grid-auto-flow: column?
I'm trying to implement a layout with a 4x2 grid that flows (using grid-auto-flow: column) into a second 4x2 grid underneath. In essence, I'm trying to cut an 8x2 grid in half and laying the two ...
- 51
4
votes
2
answers
206
views
Css grid, large size on some cards, how to place them like this
I'm using grid for this layout and I'm halfway through. As you can see number 10,20,30,40,50 gets placed on the same spot (I place them there). I would like to have my layout as from 1 to 10 are
...
- 18.9k
3
votes
1
answer
18k
views
rows overlapping in CSS Grid Layout
How can I prevent the footer row from overlapping the content row?
This is what I'm getting:
body {
display: grid;
grid-template-rows: 3.7rem auto auto;
grid-template-columns: 3rem 3fr 2fr;...
- 607
3
votes
3
answers
51k
views
grid-template-columns is not working
I have one block, display: grid.
According to the idea, the first element should be stretched to 2 columns and 2 rows, the others occupy one cell each.
But the grid-template-columns property does ...
3
votes
1
answer
2k
views
How to set up a dynamic grid based on flex or grid
I want to create a dynamic grid system that should behave like this:
first when there is only 1 item it should have a width and height of 100%.
When the second child has been dynamically added to the ...
- 830
3
votes
2
answers
19k
views
CSS grid layout changing column width with javascript
I try setting up a CSS grid layout as follows
.wrapper {
width: 800px;
display: grid;
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(5, 200px);
}
Is it possible to ...
- 223