Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 days ago.
Improve this question
I have a game engine that offers information and interactivity to the player via panels, which are simply styled divs. I'm refactoring to use CSS grid but I'm not sure that what I desire to do is possible. I suspect I need to start playing with auto-rows instead, but I can't wrap my head around how to do that and could use some guidance if so.
#grid {
width: 400px;
display: grid;
grid-template: [top] auto [middle] 1fr [bottom] auto/[left] 1fr [center] 2fr [right] 1fr;
}
#grid div:nth-child(1) {
grid-row: top; grid-column: span all;
}
#grid div:nth-child(2) {
grid-row: top; grid-column: span all;
}
#grid div:nth-child(3) {
grid-row: middle; grid-column: left;
}
#grid div:nth-child(4) {
grid-row: middle; grid-column: center;
}
#grid div:nth-child(5) {
grid-row: middle; grid-column: right;
}
#grid div:nth-child(6) {
grid-row: middle; grid-column: right;
}
<div id='grid'>
<div>header</div>
<div>header 2</div>
<div>AAAA</div>
<div>BBBB</div>
<div>CCCCC</div>
<div>DDDDD</div>
</div>
I'm trying to have a grid container and then use grid-template to define the entire structure of the app. I expected to name my rows/columns between [brackets] and when I told a child div to be eg. grid-row: middle; grid-column: right;, it would end up there and I would then use order to tell it the order I want it to be in.
Instead what happened is they all sat on top of each other, in those positions. I understand why: I'm trying to put two cells in the same spot. What I'm trying to achieve is the ability to tell a group of panels to be on the right, and they just fit into a cell as if it was a parent, but without having to write a bunch of in the proper structure under #grid, because I want this to remain flexible both for mobile/desktop, and also other games with different layouts, all controlled by simple CSS and panel IDs.
If the answer lies in auto-rows/columns, the trouble then becomes that if one panel is taller than the others in a row, they'll all need to take up that space. Additionally, I constantly hide and show panels upon state change, and I don't want to offset the entire grid when doing so. I'm not sure where to go from here to achieve what I need to do.
What I wanted to do is currently only possible in Firefox under an experimental flag: it's known as masonry. I'm unable to achieve what I want without making extra parent containers and using flexbox.
Related
This question already has an answer here:
Why is 'position: sticky' not working with Core UI's Bootstrap CSS
(1 answer)
Closed 5 months ago.
i have a weird situation that is happening only inside of a wordpress site installation. where i need to have a two columns grid and being the first one a sticky one on the top.
You can check the test page at: https://dev.mentepresente.pt/test/
the css is super simple and it works out of wordpress:
.wrapper {
display: grid;
grid-template-columns: 50px 200px;}
.item1 {
grid-column: 1;
align-self: start;
position: sticky;
top: 0;}
.item2 {
grid-column: 2;}
Does any one know the reason why this is happening?
The issue was because i had a parent element with overflow: hidden; that was messing up with with the sticky position
This question already has answers here:
How to center elements on the last row in CSS Grid?
(8 answers)
Closed 10 months ago.
I have container like this :
At the moment there is an empty case after element 5. So I would like to center the elements of the second line :
For the code i've already done :
.country-grid
display: grid
grid-template-columns: repeat(auto-fill,minmax(320px, 1fr))
This depends on the exact use case and how many grid items you are expecting. If you know you are always going to have 5 items, you could just set a specific number of columns and offset the 4th item like so:
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.grid-item {
grid-column: span 2;
}
.grid-item:nth-child(4) {
grid-column: 2 / span 2;
}
If the layout could have any number of items and you are looking at a more fluid approach when it comes to wrapping, then I'd suggest using flex for this as it's a lot simpler for setting up alignment like this:
.flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flex-item {
width: calc(100% / 3);
min-width: 320px;
}
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 10 months ago.
I have been trying to recreate the below picture in css but have been having trouble implementing it with both grids and flexboxes.
I want each of the boxes to simpy fit its content, and the remaining empty boxes to fill the space of the column.
When I try with grids I can easily create three columns with a fixed even gap inbetween columns and rows however I get stuck on how to make the individual boxes dynamic in size depending on its content.
When I try with flex boxes, I can create teh individual boxes of flexible size but it is very hard to limit the boxes to three columns of even size, but let the columns each have multiple elements.
I have thought about simply creating three different flex boxes but wanted to avoid a hardcoded solution, but maybe for this case this is the best solution?
Would I use grids or flexboxes for this kind of design?
Any insight on how to approach such a design would be very helpful thanks.
What you could do is to create 3 different classes for each column in the grid:
Each class should have align-self: flex-start as well as display: grid; in order to create space between different rows in the column. Here's the full code:
.base-layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 2rem;
}
.col-1 {
display: grid;
grid-gap: 2rem;
grid-column: 1 / span 1;
}
.col-2 {
display: grid;
grid-gap: 2rem;
grid-column: 2 / span 1;
align-self: flex-start;
}
.col-3 {
display: grid;
grid-gap: 2rem;
grid-column: 3 / span 1;
align-self: flex-start;
}
.single-content {
background-color: pink;
padding: 2rem;
}
here's an Imagesample Image
So I found this layout and I wanted to make it using display: grid
So far I came up with this
.header__grid {
display: grid;
grid-template-columns: 380px 500px 500px;
grid-template-rows: 305px 305px;
grid-template-areas:
"sweets food meat"
"sweets text fruits"
}
.header__grid-sweets {
grid-area: sweets;
}
.header__grid-food {
grid-area: food;
}
.header__grid-meat {
grid-area: meat;
}
.header__grid-text {
grid-area: text
}
.header__grid-fruits {
grid-area: fruits;
}
And it looks like this
The problem is the the last block, with fruits, should take more than one cell in grid and the block to its left should take less. I guess it is because I'm setting with of columns with grid-template-columns
So the question is is there a way to work around this?
All the help will be much appreciated
Instead of this:
grid-template-columns: 380px 500px 500px;
Try something like this:
grid-template-columns: repeat(100, 10px)
Then used line-based placement to created grid areas across those tracks.
Here's an example from another answer.
I want to use a CSS-Grid-Layout (ideally with an explicit column-grid).
And I would like to have a flexible item that absorbs any extra space along the x axis / spans as many columns as are not used by other items.
The perfect solution would be a property that makes an item span across all unoccupied columns (similar to the flex-property) - but I guess that's not possible in a CSS-Grid.
I'll try to make an example:
The following Layout uses several elements that are positioned on a grid.
I would like to have a flexible header, that absorbs any extra space on the right if the item in the area "aside1" is cut.
.grid{
display: grid;
grid-template-columns: none 1fr 1fr none;
grid-template-areas: "header header header aside1"
"nav main main aside2"
"nav main main aside3"
;
}
header {
grid-area: header;
}
main {
grid-area: main;
}
nav {
grid-area: nav;
}
.aside1 {
grid-area: aside1;
}
.aside2 {
grid-area: aside2;
}
.aside3 {
grid-area: aside3;
}
But, of course, as long as there are any items on the right side, the header will stay in it's column an the Layout will look like this:
In a Flexbox-Layout I could use the flex: 1 property to accomplish this.
In Grid... I guess I would need a way to have a box Item to absorb all unused columns. Maybe that is not possible to do.
.grid{
display: grid;
grid-template-columns: none 1fr none;
}
header {
grid-column: 1 / ????;
grid-row: 1 / 2;
}
main {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
nav {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.aside1 {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.aside2 {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.aside3 {
grid-column: 2 / 3;
grid-row: 3 / 4;
}
What I am trying to do ist to build a small "framwork" with a flexible xy-Grid, similar to foundation, but um.. not that cool (it's a school project).
And I was wondering if it's possible to build a grid system with both:
Grid Items, that absorb any free space/columns along the x-axis - possible with flex-Grid and in foundation.
Grid items, that span several rows - not possible with flex-Grid, see: Is it possible for flex items to align tightly to the items above them? (the first answer explains it pretty well)
I hope I made myself a little bit more clear.
One possible solution would be to use grid-template-columns for your explicitly sized columns and grid-auto-columns for any additional flexible columns.
While grid-template-columns sizes columns in the explicit grid, grid-auto-columns sizes columns in the implicit grid.
So try sizing your columns like this:
grid-template-columns: 100px 100px /* sizes the first two columns */
grid-auto-columns: 1fr /* distributes free space among additional columns; if
there is only one column, it consumes all space; */
This post may also be useful:
CSS Grid: How to make a column span full width when a second column is not there?