Need help solving CSS Grid Critters 9.3
I can get the grid template lines to fit correctly, but the bottom row of items won't line up.
Here's what I've got:
planet {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: 50% auto;
justify-content: space-evenly;
justify-items: end;
align-content: space-between;
}
But bottom row doesn't seem to fit. Tried applying styling to
dunes {}
and
water {}
But that just messed up the top row. Struggling going back and forth between lessons to no avail.
Finally, after reviewing previous lessons, it struck me. I needed to test out the align-items property.
This solution worked!
planet {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: 50% auto;
justify-content: space-evenly;
justify-items: end;
align-content: space-between; /***this is the key***/
}
It turns out, that justify-content and align-content work together to control the space around content items aka "boxes" or "tracks". By default, justify-content handles left/right space whereas align-content handles top/bottom space.
On the other hand, justify-items and align-items control the actual position of the items inside the boxes or tracks. It's worth mentioning that align-items throws off the position of the top row, so don't use it. Justify-items fixes the top row without throwing off the bottom row.
Related
I am attempting to build a layout in which I have a parent flexbox div with individual sections within it, the trouble I'm running into is trying to get two of the section elements to stack in a column when the entire layout is as a row.
Currently, there are two sections that occupy the full height of the row, then I have two additional sections which should ideally only be the height of their shorter content, and stack on each other in a single column::
Both the sections I'm trying to stack have these CSS parameters in my attempt to fix this::
flex-basis: 40%;
align-self: flex-start;
And the parent div flex has::
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
Any ideas as to how this might be achieved would be hugely appreciated, thanks!
You are going for a more complex layout than what one level of flexbox can do. A couple of options come to mind:
You can give the third cell in that row display: flex; flex-direction:column and then nest the smaller divs inside it.
Or, you can use grid instead of flex. Then you can arrange it three columns, but set certain cells to span multiple columns or rows as you wish. For example:
.wrapper {
display: grid;
grid-template-columns: max-content 1fr 1fr;
}
.stars {
grid-column: span 3;
}
.left, .middle {
grid-row: span 2;
}
I have:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 1rem;
When there is not enough space to fit all three containers to fit, one of my containers jump down. Which is fine.
Then the grid has 2 columns and 2 rows. I want the last element to occupy full width of sceen. So, to occupy 2 grid rows instead of one. I can do this manually with media-query, but isn't there a better way to do it?
Not sure if grid is your best option in this scenario.
You might want to use a flex container, setting flex-grow: 1 and min-width on the items.
Example:
.container {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.item {
min-width: 30rem;
flex-grow: 1;
box-sizing: border-box;
justify-content: space-between;
}
And then using negative margin on the container, plus margin on the items to use as the gap.
I am working on a web application that has a member list. The quantity of member will come dynamically from the server. I want to show each member's info in a grid of four columns.
Is it possible to dynamically place each item from right to left using Css Grid?
You should use direction property:
.container
{
display: grid;
grid-template-columns: 25vw 25vw 25vw 25vw;
grid-template-rows: 100vh; /* Your number of rows */
grid-auto-flow: column;
direction: rtl;
}
I have a grid of product tiles I'm displaying with flex to be equal height based on this codepen: https://codepen.io/imohkay/pen/gpard
They are 3-wide. However, on the last "row" when there is only 2 tiles left, the last tile gets pushed to the right as if there were 3 tiles. I can't figure out the right css setting to make it be in the second column.
Screenshot: https://pasteboard.co/Hk699jP.png
#products {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: stretch;
}
.product {
width: 33.3%;
}
They're pushed from each-other because you're using the space-between option on the justify-content property.
Either change space-between to flex-start or switch the display to a grid layout.
Fiddle (flex-box https://jsfiddle.net/swordys/db7dzkcx)
Fiddle (grid https://jsfiddle.net/swordys/65cyr3tu/)
I have a section of my website that I am using the CSS below on 2 divs, and one a tag in order to have the content vertically aligned in the center.
The problem is that with the flex style properties, when the window is < 768px ideally the content would change layout and each col-md-4 would stack on top of one another.
This is not happening, instead the columns just become really skinny and are displayed still side by side. Is there any way to fix this? Preferably trying to stay away from table-cell formatting
.about-us-nav {
display: flex;
align-items: center;
justify-content: center;
}
.about-us-nav a {
font-size: 20px;
color: #52361D;
background-color: #885A31;
border-color: #52361D;
width: 200px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.how-help-container {
margin-top: -25px;
display: flex;
align-items: center;
justify-content: center;
position:absolute;
z-index: 2;
}
There are two things you should consider:
When you apply display: flex to an element it becomes a flex container which comes with several default styles.
One of the defaults is flex-direction: row, which aligns flex items (child elements) along the horizontal axis. To switch to a vertical direction you need to specify flex-direction: column.
Another default is flex-wrap: nowrap, which forces flex items to remain on a single line (even if they overflow the container).
From your question:
The problem is that with the flex style properties, when the window
is <768px ideally the content would change layout and each col-md-4
would stack on top of one another. This is not happening, instead the
columns just become really skinny and are displayed still side by
side.
It sounds like the flex items are not wrapping. Try adding this to the flex container:
flex-wrap: wrap;
If you want the flex items to stack vertically when the window is < 768px, use a media query with the flex-direction property.
#media screen and (max-width: 768px) { .your-selector-here {flex-direction: column;} }
Note on browser support:
Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.