6,429 questions
3
votes
2
answers
111
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;
...
- 152
1
vote
1
answer
96
views
How can I extend a CSS grid to create overhangs? [closed]
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
0
answers
47
views
default positioning and overlapping with CSS grid [closed]
my goal is to create a gantt chart. for that, I started to create the displayed grid with CSS display : grid; and I succeed to obtain something that looks nice to me.
but then I try to put an issue on ...
- 1,330
0
votes
1
answer
95
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
117
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
45
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
137
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
79
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
297
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
56
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
113
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
65
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
123
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
82
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 ...
- 16.9k
6
votes
2
answers
178
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