对齐元素与网格和 flex-box，CSS & Html

Question

I'm trying to find a way to push the last row of the gird to the left so it doesn't stay centered but aligns with the grid. Thanks for any help in advanced:)

image example bellow:

Here is my code:

 #grid { display: grid; grid-gap: 77px; grid-template-columns: 1fr 1fr 1fr 1fr; padding-top: 114px; list-style-type: none; clear: both; display: flex; flex-wrap: wrap; justify-content: center; } #grid>div { border: solid 2px black; height: 208px; width: 370px; justify-content: flex-start; }

 <section id="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section>

Answer 1

You are justifying to the center. You need to change that for flex-start .

#grid {
  justify-content: flex-start;
}

You can learn more about flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

You override the grid property with a display: flex .

Without it, every block go the the left but the whole grid isn't centered anymore, to adjust that, you can add justify-items: center

Demo (I changed the block sizes to have a better preview)

 #grid { display: grid; grid-gap: 77px; grid-template-columns: 1fr 1fr 1fr 1fr; padding-top: 114px; list-style-type: none; clear: both; /* display: flex; <-- HERE */ flex-wrap: wrap; justify-content: center; /* new rule for centering */ justify-items: center; /* preview */ grid-gap: 1em; padding: 1em; } #grid>div { border: solid 2px black; height: 208px; width: 370px; justify-content: flex-start; /* preview */ height: 40px; width: 100px; } /* preview */ body { margin: 0 }

 <section id="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section>