9 Replies
this is what i want to make
but this is what i make
how can i fix it to look like first one
<div class="flex-container">
<div class="flex-items">
.flex-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
border: 1px solid gree;
}
.flex-items:nth-child(1) { display: block; flex-grow: 0; flex-shrink: 1; flex-basis: auto; align-self: auto; order: 0; } 8 child ,,,
.flex-items:nth-child(1) { display: block; flex-grow: 0; flex-shrink: 1; flex-basis: auto; align-self: auto; order: 0; } 8 child ,,,
you want flex-direction: row not column, column stacks the children and row puts them next to each other. you dont have to declare flex-direction for row as thats the default when using display: flex. so just take off the flex-direction property.you can also take off as these are all defaults
if i fix it with grid u think its betther?
.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 5px;
grid-row-gap: px;
}
grid would work too although depending on the parents size, the 1fr unit may be too large for the rows. would have to see your code in a codepen to tell for sure
grid or flex would be fine
i fix it
with grid
it work fix
