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
0 answers

CSS Grid Elements Overlapping When Resized

I'm in the early stages of creating this WYSIWYG Editor using CSS grid and I have a section for the actual document with the ID #doc-space and a sidebar where all the formatting tools sit and for some reason when the screen gets too small the…
Zyad-O
  • 85
  • 1
  • 1
  • 7
2
votes
1 answer

multiple widths css grid

So I'm attempting to create a grid like this Where I have the top and bottom posts the same size and have one post in the middle slim down and auto-fill the remaining space. Here is my code
…
user8331511
2
votes
2 answers

css - using grid-auto-column to create dynamic widths

I'm trying to get my css grid to either be 2 blocks per row (if there are enough items) or a single block that spans the entire width. However, I can't seem to get it to work using grid-auto-column. The top block is what I want it to look like, and…
A. L
  • 11,695
  • 23
  • 85
  • 163
2
votes
1 answer

CSS Grid, have an image fill height of grid item?

I want to create an image grid with one large image and two smaller ones to the right of the large one, like so; screenshot: For some reason, the images won't fill the entire height of my grid items. I've found some suggestions involving setting…
Mumas
  • 145
  • 1
  • 5
2
votes
1 answer

When using display grid main content section is moved down leaving a large gap

This is my first post on here as I'm well and truly stumped. After using a main container to centralise all content i decided to move to a grid layout to allow for future additions such as sidebars. However, when I did this my main section has been…
Weird Flex
  • 23
  • 2
2
votes
2 answers

CSS Grid Pre Horizontal Scroll

Question I want to have a 
 code block in a grid layout.
This should be responsive. When the space is to small, it should be able to scroll horizontal.
What I did


body{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
   …
user10740216
2
votes
1 answer

How to make this simple css-grid layout work in IE11

I'm building a prototype for a simple 3-panels slide thing. On the second panel, I'd like to use css-grid to have a simple way to divide the panel into 4 equal and responsive areas, 100% container's height. Here's the…
Luca Reghellin
  • 7,426
  • 12
  • 73
  • 118
2
votes
0 answers

Way to make header span full width of page while using CSS grid?

I'm trying to make my header span the full width of the page (no gaps on top and sides), but I have my header within a CSS grid, and so I'm having trouble making that happen. I want my header to stay at the top of the page, which is part of the…
wysockca
  • 21
  • 1
2
votes
3 answers

Is there a way to disable a particular css feature for chrome / firefox

Is there someway I can disable a particular CSS feature for my browser so I can view how the page will look in browsers that don't support that feature? For instance I am using CSS grid. But I want to disable CSS grid feature in my chrome/firefox so…
Qais Palekar
  • 71
  • 2
  • 4
2
votes
1 answer

CSS Grid - unnecessary word break

I have a problem with CSS grid. In the following snippet extracted from the codebase, I have a very simple HTML structure with grid layout. Content is set to break-word to prevent text from overflowing. Event though there is enough space for the…
Jakub Kotrs
  • 5,823
  • 1
  • 14
  • 30
2
votes
1 answer

unable to make one column in css grid

I have a survey form project from freecodecamp.org and when the viewport width < 768px I want the css grid to have only one column, but for some strange reason this doesn't happen. my code @import…
Ali Faki
  • 3,928
  • 3
  • 17
  • 25
2
votes
2 answers

How can i make “grid-(row or column): span 2” be responsive on smaller devices?

How can i make grid-(row or column): span 2 be responsive? what i mean is, if i resize the screen to mobile, it should look something like output of col-sm-12 Also, if i comment out :nth-child(4) & :last-child, the output will look exactly like…
Jaeyson Anthony Y.
  • 534
  • 8
  • 13
2
votes
1 answer

How to have an image inside table/flex with 100% height?

I'm struggling with getting my header area to behave the way I want when shrinking and enlarging the website. The header should be fully responsive. What I want The header consists of three…
Peter Westerlund
  • 741
  • 1
  • 10
  • 36
2
votes
1 answer

Define a max width for a group of columns in css-grid

Is it possible to define a max width for a group of columns in css-grid? I'm trying to use css-grid alongside bootstrap like flex-box markup to make fullwidth rows which align with the flex-box columns. .container__grid { width: 100%; …
Sc0lie
  • 81
  • 1
  • 4
2
votes
1 answer

Make grid items take up remaining space

thumbnail x 4, , one column can fill in 3 thumbnail, the 4th one go under and fill in rest of the space (without adding new class). .tile { max-width: 350px; display: grid; grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); …
Yan Mak
  • 151
  • 1
  • 11
1 2 3
…
99
100