6,430 questions
0
votes
1
answer
79
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
1
vote
0
answers
74
views
Why is my CSS Grid padding and image sizing wrong in large viewports in Google Chrome? [closed]
My code works on Firefox and safari On Chrome, my padding is only working to the left and right side, the padding between the sections top and bottom is wrong. The image container looks too large.
On ...
- 33
4
votes
2
answers
136
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
2
answers
123
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
96
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
118
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
47
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
82
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
114
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
66
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
89
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