Stack Overflow
Stack Overflow

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 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.

Most browsers support the current specification (CSS Grid Layout Module Level 1 W3C Candidate Recommendation, 14 December 2017).

However, Internet Explorer 10, Internet Explorer 11, and Edge 15 support an earlier version of the spec (W3C Working Draft 7 April 2011).

Useful links

5955 questions
2
votes
1 answer

Two columns grid with flat mixed list of items

I'm trying to make two columns layout of flat list of random items where some should be on the left one under each other and others on the right. So far i'm using css grid but i have an issue with "empty rows" because those cells do not know to…
Adam Szmyd
  • 2,765
  • 2
  • 24
  • 32
2
votes
1 answer

Multi row CSS grid without nesting

FOR EXAMPLE, SEE THIS PEN I have 6 menu items and I want to achieve this grid layout without nesting. I'm a newbie in CSS grid and I thought using the CSS grid will be the best way to achieve what in the design. This is what I have done so far.…
Jinu Kurian
  • 9,128
  • 3
  • 27
  • 35
2
votes
1 answer

css grid creates empty columns with auto-fill

The snippet should illustrate this fairly well, but here's what I'm trying to achieve: I want my first row to be grid-column: 1/-1, so that it spans the grid. This first row will not always be present. Additional columns in the grid should be…
freshyill
  • 393
  • 1
  • 7
  • 18
2
votes
0 answers

How to position a modal within a css grid layout?

My project's landing page has a modal that appears on a button click. It was originally positioned using position: fixed and margins set to zero; in that way, it appeared basically at the center of the screen. Now I want to position it using css…
RTC222
  • 2,025
  • 1
  • 20
  • 53
2
votes
1 answer

Percentage based column / row span

I'm wondering if there is a way to use percentage values for grid-column and/or grid-row. For example: .grid { display: grid; box-sizing: border-box; grid-template-columns: repeat(12, 1fr); grid-column-gap: 24px; } .grid-cell-25 { …
Alan Souza
  • 7,475
  • 10
  • 46
  • 68
2
votes
1 answer

vertical spacing distribution in CSS grid

I'm new to CSS grid, and I've come across a problem with a layout: I'd like the paragraph text on the first entry to sit just below the header, but the image on the left which spans both rows is expanding the right hand cells equally, leaving too…
isaacsgraphic
  • 144
  • 2
  • 12
2
votes
1 answer

grid-auto-flow dense not removing gaps between items

I've tried removing the grid gap, thinking that could have something to do with it, but it didn't solve anything. All images seem to be staying in the order they are in the HTML. I thought they were supposed to rearrange to remove all gaps. The…
user10278089
2
votes
2 answers

How to combine containers in a flexbox layout?

I have a simple flexbox layout like this: html, body { margin:0; padding:0; background:grey; } .container { display:flex; flex-direction:row; } .image1, .image2, .image3, .image4, .image5, .image6 { padding:10px; } img { …
fightstarr20
  • 11,682
  • 40
  • 154
  • 278
2
votes
2 answers

How to align multiline headings to heading baseline in CSS

I am having a problem trying to align the baselines of headings inside of a mega menu. /* Presentational bits */ .add-divider { display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid rgba(0, 0, 0,…
mrClean
  • 415
  • 5
  • 18
2
votes
1 answer

Angular sidenav not shrinking main content

I have a container with two sidenavs and some tables in between. If i toggle the left sidenav, it pushes the tables to the right, as if would use mode="push" but i am using mode="side" in this sidenav. The correct behavior here would be shrinking…
user8019577
2
votes
1 answer

CSS Grid align-items: baseline not working in Safari

I've come across a problem where the "align-item: baseline;" is not working in Safari. It works in Chrome and Firefox. Is this a bug or is there something I am missing? Codepen: https://codepen.io/NewbCake/pen/yxdqZK?editors=1100# HTML
NewbCake
  • 433
  • 2
  • 7
  • 22
2
votes
1 answer

Firefox DevTools - "CSS Grid is not in use on this page"

I'm building my first application using CSS Grids. Using Firefox's DevTools, I'm able to to highlight the Grid's tracks by clicking "# grid" next to an element in the "Rules" pane : But when I click the "Layout" pane, it always shows "CSS Grid is…
electrotype
  • 8,342
  • 11
  • 59
  • 96
2
votes
1 answer

Grid item doesn't leave one grid cell

As you can see, I have divided .content div into five equal columns. I wanted to make navigation (nav) be in the center of the last two of the columns. I specified that its location should be on 4 / 5 and also added justify-self: center for…
Alexander
  • 307
  • 3
  • 15
2
votes
0 answers

Grid row height is not calculated correctly in Chrome when justify-content is set to space-between, Is this a bug?

I have a grid container which has 3 columns and 6 child items. When i set the 'justify-content' property of this container to 'space-between', the grid element is not displayed properly. in Firefox everything is fine but in Chrome it seems that the…
Mostafa
  • 45
  • 5
2
votes
2 answers

Is there a way to detect a mouseover in a grid-area of a CSS grid?

I don't have any code to provide as to what I've tried so far because it's just a hypothetical question at this point. I have a large image, and it is centered width-wise in one area of a CSS grid. The large image is "zoned" into three vertical…
Yetanotherusername
  • 109
  • 8
1 2 3
…
99
100