css-grid Questions
3
Solved
I have a two column layout in CSS grid and would like to toggle to a single column layout at 1024px.
.page {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
grid-colum...
2
I have what I thought was a simple task : given x items, show them in a grid, with each column being the width of the content. If the number of columns exceeds the width of the container, create a ...
3
Solved
I'm a newbie in CSS Grid, after searching in Google, I haven't found what I seek for, I wonder in alignment and justifying properties, what is the difference between flex-start/flex-end and start/e...
2
Solved
I'm trying to do a responsive layout with css grid by getting two elements to overlap each other halfway. On wide screens they are in one row and overlapping horizontally, but on narrow screens the...
5
"css grid layout" = https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Does anyone know of a javascript way to work out what column / row the mouse is currently in?
I'm gues...
Physiography asked 17/12, 2016 at 13:15
2
Solved
I wanted to set the row height for each row in a grid using grid-template-rows: repeat(auto-fill, 200px) but realised it only applies to the first row of the grid. Turns out grid-auto-rows: 200px w...
7
Solved
I am trying to create a footer whose width is 100% (of the body). On the left side of the footer, I want a logo. On the right side of the footer, I want some text. So I decided to try to use CSS gr...
2
Solved
All guides about CSS grid seem to imply a structure where the elements positioned in a grid are direct children of the grid element itself:
<div class="wrapper">
<div>A</d...
3
I am trying to create a grid that looks like this,
Two columns in the first row and three columns in the second row. They should be equal in width, but my drawing skills aren't the best.
I am ...
4
Solved
I have created an example of a sliding grid with fixed headers, using the "CSS Grid Layout" and "sticky position" technologies. For convenience, the content of the grid is generated by a script, wh...
Lime asked 10/11, 2017 at 8:16
2
Solved
I have 4 columns. The actual content for columns 1 and 4 is 150px, column 2 is 250px and column 3 is 370px. I want to wrap the columns when the browser width changes. When I decrease the width of t...
2
I have a CSS grid with a bunch of auto-flowed grid items. Sometimes the grid items are one 1 x 1 track, and sometimes they're 2 x 2 tracks, so I do not know from the source order which items will b...
Strath asked 24/5, 2017 at 15:7
1
I have a problem with a Material-UI Table component and its size and scrollability.
Short:
The Material-UI table component becomes only scrollable, if its parent has a fixed size. If I set the size...
Management asked 16/12, 2020 at 14:20
3
Until now i use Web Compiler by Mads Kristensen but now i'am facing problems compiling new sass commands like @use or using some css calculation like
grid-template-columns:repeat(auto-fill,minmax(m...
Gurl asked 13/3, 2021 at 9:27
2
Solved
I am using Tailwind’s new CSS Grid feature. It has Grid Column with values span 1/span 1 for class col-span-1, span 2/ span 2 for class col-span-2 and so on until span 12/span 12 for class col-span...
6
Solved
I've just begun fiddling with the CSS Grid and I'm curious as to how to create a fixed header. Should I create a two row grid where row one is the header and row two is another grid for the content...
Darsey asked 13/3, 2018 at 14:23
5
Solved
I'm having fun getting my head around the new CSS Grid spec, but I'm running into trouble with borders.
Is it possible to collapse borders in a CSS Grid, or is there any way to style the gutter?
As...
5
Solved
I am currently have some troubles to add a vertical line between grid items.
My current solution has empty spaces between the lines and I cannot work with borders, because a border will directly "g...
3
Solved
I am going to break a line of grid item like this.
As you can see the image, rest space of grid should be empty.
<Grid container spacing={3}
<Grid item xs={12}>
"Grid Item xs={12}&...
Longitude asked 7/8, 2020 at 4:4
1
I have a grid layout for a dashboard I am building. I am trying to achieve the following:
Maintain aspect ratio of grid elements
Ensure each grid row is filled/complete. This is the problem child ...
Junia asked 22/12, 2020 at 18:43
2
Solved
Is it possible to define a grid with a maximum number of columns, but allow elements to wrap onto new rows when the screen width changes?
I have implemented classes that allow rows to wrap onto new...
4
Solved
I have a css grid (display:grid) and rows with fixed height as well.
Can I align the rows to the top of the grid instead of distributing them vertically?
.grid {
height: 180px;
display:...
3
Solved
I am trying to implement a flexbox layout that works as follows:
A flexbox container with flex-direction: row contains two children.
The parent should only be as big as it needs to to accommodate...
5
Solved
I found this CodePen solution for a sticky footer in a CSS Grid layout, but it has two problems for me:
It is kinda ugly with min-height: 100% and height: 100%
It only works with two elements in...
3
I have a dynamic number of elements (all of equal dimensions). I want to position them in a grid, such that they are ordered in columns, with a dynamic number of columns based on the available cont...
© 2022 - 2024 — McMap. All rights reserved.