css-grid Questions
1
Solved
I like very much css grid because of its simplicity. But there seems to be a performance issue with css grid that flexbox does not have.
I have implemented a two column full screen page both column...
4
Solved
I'm creating a navbar made with CSS grid.
I decided making it with grid so I can re-arrange the sections (items) without modifying the html (just modify the CSS).
Then I created the grid with 3 are...
3
I am using CSS grid layout to position various parts on a website. I use grid-column: x / x; and grid-row x / x; to set their position and size on the page. It's working really well.
Now I am tryi...
3
Solved
I created a new Angular 5.2 project using the CLI (e.g. ng new MyApp)
Changing to the folder and running the app works fine. (e.g ng serve)
I made the following changes to the generated code (see...
Railroad asked 2/2, 2018 at 18:5
1
Solved
I have tried to search Stack overflow, mozilla documentation, and CSS tricks to find out why I keep getting an invalid property value for my grid-template-areas and cannot figure it out. Coul...
4
Solved
As far as I understand, anything flexbox can do, css-grid should also be able to do (usually more verbosely).
Yet I cannot figure out how to mimic a flexbox with an item pushing off the others wit...
5
I just started with a grid layout and noted that it renders differently on the same viewport size:
(1) Initial display in maximized window, nothing special here:
(2) After resizing the browser win...
Heron asked 10/3, 2021 at 20:8
4
Solved
I want an item to start at the first column and end at the last column, no matter how many columns there are.
It should work like this:
item {
grid-column-start: 1;
grid-column-end: -1;
}
acc...
2
Solved
I'm trying to replace a grid of data & interactive components that had been set up in Bootstrap with a CSS Grid-based layout.
I was able to replicate the grid, but am having trouble getting s...
3
Solved
Suppose I wanted to use auto dense packing in a CSS grid layout. Is there any way of introducing non-rectangular region configurations? For instance an L-shaped region that cover two columns in one...
1
I am currently learning about CSS Grid and I am trying to use Chart.JS inside CSS grid item cells, but if the browser is resized the charts do not resize with the grid like other items would.
But ...
Steelworks asked 18/7, 2019 at 8:55
3
Looked into a few questions here but they don't quite solve what I'm looking for.
Say I have a website and I want. On desktop I want this:
This is easy. grid-template-columns: repeat(3, 33%) (basi...
2
Solved
What section of the css-grid specification addresses how a legend element should be handled if a fieldset element is set to display:grid?
As you know, a legend element is typically the first child ...
1
I am trying to create a video conferencing like grid. I am trying using css-grid but somehow I am not being able to accomplish what I am looking for. The idea is simple, have a grid of videos on sc...
5
Solved
I have a following requirement to design the print layout to generate a pdf and I've tried various options including CSS flex and grid but not much success.
The requirement is:
Show the content in...
Roots asked 8/1, 2021 at 8:31
2
Solved
I'm trying to render items in a specific order, look at the picture:
i.e. there is an infinite number of items, by columns, each column has two items. Do you have any ideas how to code this using ...
1
Solved
When I set the first column in a CSS grid column to a minimum percentage, the column width does not observe the minimum. Example:
grid-template-columns: minmax(50%, 75%) 1fr;
With these values, as...
2
Solved
I'd like to display a number of divs in left-to-right order, giving them an equal amount of space and spreading them over two rows.
e.g.
[div 1] | [div 2] | [div 3]
[div 4] | [div 5] | [div 6]
or
[...
2
Solved
I come from a heavy div/float background to build responsive sites (e.g. Bootstrap 3, Foundation) and used Flex box briefly but have been attempting to use Grid everywhere since it's been really gr...
1
Solved
I'm new to HTML, CSS and I have been struggling to make this responsible grid with images. When you hover above them, text appears, but that's working fine. The problem is that once I resize the si...
3
Solved
I set transition: all ease-in-out 1s;, but going the same way changing the properties of the grid-column does not work with transition.
Is there any other way to use animation here?
<div class...
Selfcontradiction asked 9/4, 2019 at 4:21
4
Solved
I need to have different layouts for a dashboard. I need only horizontal scroll for layout-container if the items exceed to fit in a visible viewport. I came across a layout with the following requ...
4
Solved
I'm currently working on my first page where I want to use CSS grid display: grid.
It works very well, but I come across a small problem with an element that I want float classically - text floats...
4
Solved
Is there a way to use both or either display: grid/-ms-grid into one style sheet or do I have to use an HTML hack or JavaScript to query what type of browser a page is being viewed with grid layout...
Bustamante asked 16/7, 2017 at 1:51
2
I have a dynamic list of items (containing text) placed column-wise which I need to break after every 5th item.
I have only 2 constraints:
Width of each Item is 100px - if the text overflows, it ...
© 2022 - 2024 — McMap. All rights reserved.