Questions tagged [css-grid]
CSS grid layout is a W3C technology that allows for the creation of grids. It eliminates the need to use floats, tables, absolute positioning and even flexbox for building all sorts of grids, from simple to complex. Do not use this tag for CSS grid systems in general.
css-grid
6,291
questions
-3
votes
0
answers
17
views
I am trying to look for a better practice and convenient method to make the grid images more responsive [closed]
I have been trying to replicate a website which I found from frontendpractice I am pretty unfamiliar with css grid and instead wanted to opt for flexbox for the console display boxes, but used grid ...
1
vote
1
answer
34
views
CSS grid: prevent a specific cell with lengthy text from setting the width of its column [duplicate]
In a grid layout with two columns I have several rows with similar content, while the last row has in its first cell a lengthier text.
I use display: inline-grid and grid-template-columns: auto auto
...
1
vote
1
answer
43
views
How to overlap flex items in a fix width?
The final result I want is this and the result I am able to obtained is this.
Basically I want the cards to overlap in a fixed width, when it is overflowing its parent.
And when it is not overflowing, ...
0
votes
0
answers
20
views
Grid layout where one element can expand without affecting its row
I have grid layout like this:
Here is the reproduction link:
https://stackblitz.com/edit/stackblitz-starters-4y8ked?file=index.html
And here is the code snippet with the grid styles:
display: grid;
...
0
votes
1
answer
25
views
one grid item is affecting grid items of another (parent) grid
I have the following code which works fine.
*,
*::before,
*::after {
box-sizing: border-box;
}
img {
width: 100%;
}
body {
font-family: monospace;
background-color: aliceblue;
}
....
1
vote
1
answer
42
views
CSS Grid - make next row take 100% width and space items evenly
I have a list of items in a row. I want each item to take up a minimum width. When the user resizes the screen I want the items to overflow to the next line.
.container {
display: grid;
grid-...
-4
votes
0
answers
29
views
What is the cleanest way to dynamically build a grid layout on a web page? [closed]
Say i'm building a page to compare mobile phones according to various aspects (somewhat like this, but with some differences).
I want a tabular layout, with a column for each phone, and a row for each ...
0
votes
0
answers
24
views
Does changing the grid-row will changes the grid-column value to 1/2? (CSS) [duplicate]
My main question there is in the title, here I will ask my question in the following example:
CSS and HTML codes:
*{
margin: 0;
padding: 0;
}
.panel{
display: grid;
grid-template-...
-1
votes
0
answers
17
views
How to create a specific row spanning flex grid [duplicate]
I am trying to create the flex grid in the attached image. the last column row spans, the second row col spans. I cannot seem to quite get there, can any flex grid experts help?
flex grid example
Been ...
0
votes
2
answers
61
views
I am having trouble getting rid of the whitespace i have inbetween some of my div columns
this is a picture of the issue I am currently coding a website for a client. This is a portfolio website to showcase their photography and im running into an issue with my layout. I have one div as my ...
0
votes
1
answer
31
views
Tailwind: dynamic grid columns with no gaps
The documentation is not very clear about all the grid options there.
I have this grid template in alpinejs styling it with tailwind:
<div x-show="multiple" class="w-auto grid mt-3&...
1
vote
4
answers
61
views
How to float elements from bottom left corner to top right corner
Is there a smart and simple way to float elements from bottom left corner to top right corner?
My solution with display:grid is too static and has fix cols and not more than 10 items. I`m searching ...
1
vote
0
answers
19
views
CSS Resize grid cell based on image content
I have the following basic HTML + CSS of a grid with 2 columns and 3 rows:
<div class="container">
<div class="inner-container"></div>
<div class="...
0
votes
2
answers
46
views
Grid Template Layout - aligning multiple items in same column (self align start)
I'm trying to use grid template to build a layout for different views (mobile / desktop etc).
I'm using grid-template-area.
For mobile it is easy since I'm using just 1 column but when I go to desktop ...
1
vote
3
answers
54
views
Reordering columns in CSS grid
I have the following HTML:
<ul>
<li>
<p>A</p>
<p>B</p>
<p>C</p
<p>D</p>
</li>
<li>
<p>AAA</p>
...