6,432 questions
5
votes
3
answers
114
views
Why does a different row height in the 4th row change the row height distribution among the first three rows?
I have a Grid with two columns and 4 rows. The grid-areas are as follows
grid-template-areas:
"v p"
"v o"
"v t"
"m t";
I have one Item per area. So my item v (...
- 569
1
vote
0
answers
41
views
How to make position: sticky work inside a CSS Grid child with overflow?
I am trying to create a layout where the page height is fixed to the viewport (100vh), the .sidebar and .content areas scroll independently, and a .content-header inside .content should stay sticky ...
-1
votes
0
answers
36
views
CSS Grid Dashboard: repeat(auto-fit, minmax(300px, 1fr)) Unevenly Spacing Tall vs. Short Cards on Resize? [duplicate]
I'm building an analytics dashboard with variable-height cards (e.g., text metrics vs. embedded charts). Using CSS Grid's auto-fit for responsiveness works on desktop, but resizing causes uneven gaps ...
0
votes
1
answer
50
views
repeat(auto-fit, minmax(auto, 1fr) is not valid syntax
I want to create a grid with repeated columns. The columns should be as large as the children's content and then the remaining space in a track should be distributed.
I thought I could achieve this ...
- 36
1
vote
1
answer
63
views
Why does `line-height:1` cause overflow in this CSS grid?
I'm a little new to CSS grid stuff, so forgive me if this is obvious, but I haven't found a good explanation for this so far.
In my mind, line-height:1 basically means "use the normal value."...
- 11.4k
0
votes
1
answer
86
views
I'm getting extra space following the content in a one column / two row cell [closed]
I have a 3 column by 4 row CSS grid. The cell in the first column spans two rows and I want the next row to be directly after the content in that first cell, but there's a space between the content ...
- 3,465
4
votes
2
answers
145
views
Right-align grid items
I've got this snippet:
.grid {
border: 1px solid #c5c5c5;
width: 220px;
display: grid;
grid-template-columns: 60px 60px;
grid-auto-rows: 40px;
row-gap: 10px;
column-gap: 10px;
...
- 163
1
vote
1
answer
134
views
How can I extend a CSS grid to create overhangs?
Semantically I have a table so I would use the HTML <table> element. For grouping rows I can use <tbody>:
<table>
<tbody>
<tr><td>A</td><td>...
0
votes
1
answer
102
views
HTML scrollable list with variable
I am building a UX where the page needs to have header and footer glued to the top and bottom of the screen, and the main section in the middle must take up all the space.
One of the views that goes ...
- 11.1k
2
votes
0
answers
122
views
Is it possible to do this in CSS Grid / Flexbox? [closed]
So I have a parent with divs inside.
I want each div to be a column (amount of columns can be changed by the user).
I want each div to take as much space as possible until it hits a width of 15rem for ...
- 89
1
vote
1
answer
60
views
CSS grid equal row height for rows 2+
I'm trying to set up a table via css grid where the first row is a header and remaining rows are just table data.
<div class="grid">
<div class="header">header</...
- 1,430
3
votes
1
answer
147
views
Why is an extra column line created in css grid?
I'm working with CSS Grid and I noticed a behavior I don't fully understand.
body {
background: rgb(58, 58, 59);
}
.grid-parent {
height: 90vh;
display: grid;
gap: 5px;
grid-template-...
- 23
-1
votes
1
answer
84
views
What would be the best approach to build a CSS grid with 1500 divs that fill in te best way the viewport?
I have 1500 divs (nothing should be displayed into them) and I would like based on the size of the viewport size to build a grid that best fill in the viewport.
Divs should fill the rows up to the end ...
- 225
2
votes
3
answers
299
views
CSS Grid layout: items reorder unexpectedly — how to preserve DOM order?
I want to create a masonry style layout
Here is how i did it but it didn't work as expected:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
background-...
2
votes
1
answer
58
views
Why adding border to Grid Display children behaves differently than Flex Display children?
Using the following HTML why adding border mis-aligns the children:
https://jsfiddle.net/7dp2uqe8/
<style type="text/css">
.flex {
display: flex;
}
.flex-item {
flex:...
- 51
1
vote
4
answers
118
views
Set height and Width of spinner for responsive div elements
I am using CSS-grid responsible layout for web. The layout have three sections leftmenu, content and right.
For those sections I have to use spinners. The spinners width and height need to increased ...
- 349
1
vote
0
answers
69
views
Define css rules for dynamic column arrangement
I want to define a set of css rules to accomplish the following effect: I have a variable amount of child items of fixed size that need to be arrange in columns. If the items reach a certain height, ...
- 91
0
votes
1
answer
125
views
Elements relative to a higher parent stop being sticky after scrolling the length of their direct parent
I'm having a problem with a grid component I've built, as described in the title. The elements are relative to a parent higher in the dom, but when their direct parent's scroll width is scrolled, they ...
- 91
1
vote
2
answers
96
views
Why does grid-column add an extra row? [duplicate]
I’m trying to understand what’s happening with the grid-column property in what’s supposed to be a single row.
I have a simple grid of four items with grid-template-columns, where I want to reverse ...
- 17k
6
votes
2
answers
191
views
CSS Subgrid causing unwanted gap
I have a CSS grid of "cards" that can have some optional content in the middle. Within the cards I'm using grid-template-rows: subgrid so that the rows of content in each card can align with ...
- 2,009
0
votes
1
answer
102
views
Formatting empty cells in a CSS grid
If I'm making a grid with a fixed size, with some cells/areas populated, is there a way to format the implicit empty cells? Or do I have to add <div>s for each cell?
.container {
display: grid;...
- 3,499
0
votes
1
answer
47
views
How align paragraph children in grid layout? [duplicate]
I have layout like image below:
The jsx/html code:
<article id="exhibition">
<section>
<a href="#">
<h1>{exhibition[0].title}</h1>
&...
- 1,692
3
votes
3
answers
256
views
CSS grid gallery with 2 rows and automatic number of columns
I'm building a site with multiple image galleries, each with a different number of images.
What I wanted to do is to set a fixed number of rows(2, in this case) and it auto generates the amount of ...
- 47
-5
votes
1
answer
80
views
Why aren't justify-items, justify-content, etc working in grid cell alignment?
I want to create even spacing between my ul list: New Upload and Share. See example below.
I use justify-items: space-between among other variations to try to evenly distribute my ul items but with no ...
- 43
1
vote
2
answers
99
views
Inbuilt scrolling support for custom control
There is a known behaviour with cs grid where if the content of the cell is larger than the computed layout cell size, the cell expands. Meaning your grid is only a fixed size if the content is less ...
- 35
1
vote
1
answer
72
views
Why does grid-template-areas break when combining minmax() and auto-fit in CSS Grid? [closed]
I’m trying to create a responsive layout using CSS Grid.
The grid should have a header, main content, and a footer. I’m using grid-template-areas combined with auto-fit and minmax() to make the layout ...
- 29
1
vote
1
answer
65
views
How to make CSS grid fill even with element spanning 2 columns
If I have a grid like this where an element spans 2 columns
.parent {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 1rem;
}
.element.green {
grid-column: 1 ...
- 13
4
votes
2
answers
103
views
How it comes that caret is starting at the top and not at the center?
In the following code when you click the box the caret loads automatically on the top. How come, though? Only when you press enter and then delete will it be in the center as in the process of the 2nd ...
- 141
0
votes
1
answer
92
views
Responsive CSS grid not responding correctly to small browser
I'm trying to create a responsive 12 column layout, which should be fairly standard in these days. However, I've run into an issue I don't understand.
I have this simple HTML just inside the <body&...
- 4,520
0
votes
0
answers
15
views
CSS make each row start in the same position on each item [duplicate]
For example I would like the "reviews" row to be in the same position on each li no matter what size the heading tag is
Unfortunately using min-height on the heading isn't an option as it ...
- 954
0
votes
1
answer
106
views
How to align flexbox elements without clipping under Grid column, or alternative solution
I have a grid column layout of: [full-width] [breakout] [content] [breakout] [full-width].
Within the [breakout] column I have an icon, and in the [content] column I have a section header, and ...
- 21
0
votes
0
answers
72
views
CSS Grid Layout creating huge gap in my sidebar between 2 divs [duplicate]
I have used css grid to create a flexible layout, where I am able to move divs into different slots from desktop to mobile.
The issue I am having is if the content in my left div is long then the ...
- 993
1
vote
1
answer
50
views
Questions about the grid box item width
How to let 4's width look like 1 + 2 not now
Because the same is divided into three parts, but it looks different! Why?
I don't know much about grid box, is it the reason for gap?
.grid-container {
...
- 13
1
vote
1
answer
120
views
How to remove the extra space appearing in Firefox with css grid & subgrid?
I've made a layout which works in Chrome but not Firefox. In Firefox each grid item has a lot of internal space. I've tried a lot of the obvious stuff, but I can't see what the cause of the space is ...
- 1,758
0
votes
0
answers
82
views
How can I create a grid that meets custom specifications?
I have an ad system with two categories: TOP and BASIC. Ads are loaded from the backend in random order, returning a paginated object where TOP ads come first and BASIC ads come after. I want to ...
0
votes
1
answer
53
views
My CSS grid dimensions change when changing it's child elements font-size
I am trying to make a 3x3 menu in html/css with display:grid.
Some of the squares in my menu need to be big plusses, so I tried changing the font-size of these plusses, this however changed the ...
1
vote
2
answers
102
views
CSS Grid create new rows for each column dynamically if needed
I am working on a responsive layout, in the larger screens it will have 3x3 layout. The 1st column will be filled first. Once there are 3 items in the first column, the 2nd column will start to fill. ...
- 416
3
votes
1
answer
120
views
CSS Subgrid not honoring parent template areas in Firefox
We have a relatively simple grid/subgrid that we've distilled down to the following example. The goal is to have an image on the left spanning two rows, and then on the right a heading followed by ...
- 55.7k
0
votes
1
answer
62
views
How to make my Fake OS website more responsive and make the elements maintain their size proportions as the window is resized?
I’ve searched quite a bit, but none of the other resources matched the specific CSS structure I have. No matter what I tried, my layout never became responsive. I’m very new to CSS and still learning ...
- 23
1
vote
2
answers
98
views
Maintain the responsive structure with a side bar layout
I am trying to implement a layout with the following structure:
Initial layout:
A top bar that contains some boxes aligned centrally
The main content area that has a sidebar, a large right box, and ...
- 385
1
vote
1
answer
80
views
Prevent grid reflow with simple <div> addition
I wrote a small site that queries a MongoDB instance containing prior brute-force attempts by IP to help with firewall management. Originally written with a table layout, I rewrote the site to use a ...
- 85.1k
-1
votes
1
answer
45
views
Responsive Grid container with image
I can't figure out how to build an adaptive block with images up to 320px resolution without extra lines of code using grid.
The problem is in the last line, where I need to place 2 pictures in the ...
1
vote
1
answer
114
views
Browser showing css grid track sizes which i do not understand
My Page
In the above image, you can see track sizes are shown as I inspect the page, but as per my knowledge they are showing wrong track sizes.
For example, in the first row track size it is showing ...
0
votes
1
answer
42
views
CSS Grid Container abnormal behaviour on it's width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid<...
3
votes
2
answers
51
views
Align child elements to bottom one-by-one without space inside grid div
There are 2 child divs inside main parent div with "display: grid";
Hight of these 2 elements can be different. I know that i can align these elements vertically to bottom if i use "...
0
votes
1
answer
89
views
Why does my CSS Grid container grow in height even with `height: 500px` set?
I’m using CSS Grid with grid-auto-flow: column and grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)).
I’ve explicitly set a fixed height on the container (height: 500px), but when one of the ...
- 15.9k
1
vote
3
answers
144
views
Why doesn't the third grid row expand to fit its overflowing content when using `minmax(100px, 1fr)` in CSS Grid?
I'm using CSS Grid to lay out a fixed-height container with 8 rows. Each row is defined using:
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
The container has a fixed height of 600px, and ...
- 15.9k
2
votes
1
answer
66
views
Why are the last two grid rows only 27px high when using `grid-template-rows: repeat(auto-fit, minmax(100px, 1fr))`?
I'm working with a CSS Grid layout and trying to evenly distribute rows inside a fixed-height container using:
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
Here’s the full CSS and ...
- 15.9k
1
vote
3
answers
82
views
2 column layout, dynamic height with y-scroll without Javascript
Requirements are as follows:
Use either css or flex to do the following (which ever is most appropriate) and without the use of javascript:
A Parent div which has 2 columns and one row
The content of ...
- 1,442
0
votes
2
answers
46
views
HTML elements do not span grid template areas properly (they span only one cell)
It is my first attempt us use responsive design using grid templates, following some example code I found.
However my elements just use one grid cell, even if multiple contiguous cells use the same ...
- 4,748