All Questions
Tagged with grid-layout css
695
questions
568
votes
37
answers
334k
views
Flex-box: Align last row to grid
I have a simple flex-box layout with a container like:
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
Now I want the items in the last row to be aligned with the ...
- 12.6k
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
189
votes
5
answers
221k
views
Grid of responsive squares
I'm wondering how I would go about creating a layout with responsive squares. Each square would have vertically and horizontally aligned content. The specific example is displayed below...
- 12.2k
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
55
votes
7
answers
203k
views
How can I make Bootstrap 4 columns have a height of 100%?
how can I make a column take up 100% height of the browser w bootstrap 4?
See the following: https://codepen.io/johnpickly/pen/dRqxjV
Note the yellow div, I need this div/column to take up a height ...
- 2,240
51
votes
8
answers
23k
views
Left aligned last row in centered grid of elements
I have a bunch of same-size blocks set to display:inline-block inside a div that has text-align:center set to align the blocks.
| _____ _____ _____ _____ |
| | | | | ...
- 1,163
47
votes
3
answers
62k
views
CSS grid where one column shrinks to fit content, the other fills the remaning space
I need to create a horizontal layout where one block takes all available space and the other ones shrink to fit their content.
For example:
<div class="grid">
<div class="expand">...
- 12.6k
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
43
votes
4
answers
59k
views
Make a <div> square when there is a dynamically changing width based on percentage [duplicate]
I am working on a web app that will generate an NxN grid based on the user's selection of N. I want the total width of the grid to be relative (ie 100% of the available space) so that users can print ...
- 2,047
37
votes
6
answers
38k
views
Change the order of col-*-12 columns in Bootstrap using push/pull
I have two columns of the same size (.col-xs-12) and I would change their place when the screen size correspond to that of a mobile device. I would place them in the reverse order.
I have read that ...
- 13.8k
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
3
answers
112k
views
min-width for column in Bootstrap grid system [duplicate]
I have following HTML with Bootstrap CSS.
<div class="row">
<div class="col-sm-4" style="min-width: 66px;">Name</div>
<div class="col-sm-1" style="min-width: 120px;">...
- 1,995
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
29
votes
11
answers
8k
views
Wanted: CSS grid system AND collapsing margins
I think this is a tough one.
I use a grid system utilizing float:left. I could rewrite it with display:inline-block, but that would not change a thing.
Let's say we have two columns:
<div class=&...
- 33.1k
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
25
votes
3
answers
13k
views
Bootstrap 3 grid, does it *really* matter how many columns are in a row?
I have a form layout that has bootstrap 3 form groups on it. I want these form groups in a single column on < small, 2 columns on tablet size break and 4 column on larger screens.
I have it ...
- 3,998
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
21
votes
10
answers
38k
views
Mosaic of images HTML/CSS
I want to make an image layout with portrait images inside a div with a fixed aspect ratio of 3:2. The size of images is 327x491px.
The main issue is unwanted spaces between images. How do I align ...
- 2,314
21
votes
3
answers
85k
views
How do I make a grid with Html and CSS with DIVS
I have all my divs necessary for my tic tac toe game, however I can't seem to find a simpler way to make a grid and not have any borders so it's just a grid and not 9 full squares... I think it's an ...
- 311
20
votes
4
answers
35k
views
More than 12 bootstrap columns with a horizontal scroll
I am trying to make a table using bootstrap grid system. I know that we should use only 12 columns per row. But I wanted to have more than 12 columns with a horizontal scroll for the entire table. So ...
- 1,302
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
3
answers
21k
views
Top navbar overlaps with main content
I'm converting my landing page from Bootstrap to Semantic-UI. The page has a position fixed top navbar. The main content is divided in two columns (3-cols and 9-cols). The left column is used to show ...
- 8,121
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
15
votes
1
answer
7k
views
Responsive Grid Layout Framework [closed]
I want an easy to use grid framework for my current web project. These are the features i would appreciate:
fluid grid layout: boxes that can be aligned horizontally (side by side), each having the ...
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
12
votes
1
answer
25k
views
Single full-width column in row with twitter bootstrap grid
When using bootstrap's grid, what is the best way to markup a single full-width column in a row?
Do you have to use container and row to hold the column (.container > .row > .col-xs-12 > ....
- 257k
11
votes
2
answers
8k
views
CSS3 column layout with dynamic number of columns
I have a set of images that I want to display in the following pattern:
[1] [4] [7] [10] [13]
[2] [5] [8] [11] ...
[3] [6] [9] [12]
I know that I can always manually group 3 images into a div....
- 10.8k
10
votes
3
answers
18k
views
Bootstrap 3 and .col-xs-* -- Do you not need rows of 12 units?
I'm a little confused by the Bootstrap 3 documentation and thus usage of the .col-xs-* classes.
The docs for Grid Options say that all of the grid systems use 12 columns.
If you take a look at ...
- 103
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
10
votes
1
answer
7k
views
Is it possible to use grid layout to make a table with frozen/fixed header
The fact that grid layout allows me to build a table in CSS in a completely different way, I was trying to figure out a way to make a grid layout where the first row stays in view, whilst the rest ...
- 441
10
votes
2
answers
7k
views
HTML grid layout disrupted by SVG child element
I'm trying to make a page with a simple 3x3 grid layout: header top, footer bottom, two sidebars, and the main display. Everything works fine until I add the SVG element that should fill the main-...
- 621
9
votes
3
answers
14k
views
Huge whitespace around plotly chart in bootstrap grid
I have a .Net application in which I am trying to create a graph using bootstrap.js and plotly.js.
I have a problem with a huge white-space in my grid when I create a responsive chart. I have figured ...
- 5,196
9
votes
4
answers
28k
views
Create a user-defined gap between two Bootstrap columns
I want to create little panels/dashboard for my interface. In my case I want to have two panels like so
+-------------------------------+ +-------------------------------+
| ...
- 345
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
3
answers
12k
views
Using fixed position with a grid layout framework
So I am creating a web page, where the menus on the left hand side are fixed (They follow you when you scroll up and down the page). I am currently using The Grid layout: Foundation (by zurb) http://...
- 811
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
9
votes
3
answers
895
views
Auto-growing margins when screen width get stretched
I have a list (<ul />) that I try to display as a grid. The cells have a fixed width (let's say 100px): the number of cols and rows depends then on the screen resolution.
When the screen has a ...
- 48.3k