6,435 questions
1
vote
2
answers
124
views
CSS Grid Layout- How to keep menu elements inside the navbar when being resized?
I'm practicing to build a website layout that's primarily structured with using CSS grids - a single-column, multi-row grid - with the following ideas:
1. The Navbar has a determined height
2. There ...
- 135
-1
votes
0
answers
58
views
Dynamic columns, with 1 column span to the row end of grid layout [duplicate]
I was trying to create a somewhat responsive css grid layout with this kind of setup in mind:
variable number of col
through repeat minmax
------+----------------
aside | item | item | ...
- 9
0
votes
1
answer
91
views
CSS grid adaptive cells [closed]
I'm trying to make sure the columns are the same width and can expand/contract freely as numbers are entered or deleted. I was able to achieve the desired behavior, but how can I prevent the right ...
- 69
Best practices
0
votes
3
replies
101
views
How to respect other elements when breaking out of container?
I got a layout that is two columns where the right column will contain some text and a header. The header should also have the possibility to either remain in its column or span across both columns ...
- 442
5
votes
3
answers
139
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
1
answer
83
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
37
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
58
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
66
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
88
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
147
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
137
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
103
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
123
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
63
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
148
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
93
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
1
vote
3
answers
310
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
61
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
119
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 ...
- 347
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
126
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
98
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
204
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
106
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,508
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
267
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
81
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
75
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 ...
- 31
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
107
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
73
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
51
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
125
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
1
answer
55
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
106
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
127
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
100
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
82
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
46
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
116
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
90
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
152
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