Center a list of elements in a page - html

Question

I'd like to center a list of elements in a page without redimensioning the elements and at the same time, fit as much as possible in the same row.
I manage to do it with several #media rules for each screen size from 1 element per row up to 4 elements, but I'd like to know if there is a way to do it in a way that it would fit whatever the width of the page is.
Here is what I've tried and works:
.container {
display: flex;
width: max-content;
flex-wrap: wrap;
flex-direction: row;
margin-left: auto;
margin-right: auto;
}
#media only screen and (min-width: 294px) { .container {
width: 290px;
}}
#media only screen and (min-width: 584px) { .container {
width: 580px;
}}
#media only screen and (min-width: 874px) { .container {
width: 870px;
}}
#media only screen and (min-width: 1164px) { .container {
width: 1160px;
}}
.rectangle {
width: 286px;
height: 180px;
margin-right: 2px;
margin-left: 2px;
margin-bottom: 24px;
background: #aeaeae;
}
<div class="container">
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
</div>

Answer 1

If I understood correctly you want to center all the items that fit on one line - then you can use justify-content to replace the media queries
DEMO
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-left: auto;
margin-right: auto;
justify-content: center;
}
.rectangle {
width: 286px;
height: 180px;
margin-right: 2px;
margin-left: 2px;
margin-bottom: 24px;
background: #aeaeae;
}

Answer 2

What I like to do when trying to accomplish this is setting text-align: center; on the container, (.container in your case). Then for the elements you're wanting to have be centered, setting the display property to display: inline-block; (.rectangle in your case). This will put as many elements that'll fit, on to one line. And anything that doesn't fit on to the next, still centered. When you resize your window, the elements move down to the next line as needed.
Change your css to this:
.rectangle {
width: 286px;
height: 180px;
margin-right: 2px;
margin-left: 2px;
margin-bottom: 24px;
background: #aeaeae;
display: inline-block
}
.container {
/*display: flex;
width: max-content;*/
flex-wrap: wrap;
flex-direction: row;
margin-left: auto;
margin-right: auto;
text-align: center;
}
You'll need to comment out the first two lines in .container for this to work properly. Hopefully this works for you!
EDIT: I thought originally you were wanting your elements to be centered. Now I'm not sure. If you're wanting elements that are on subsequent lines to be left aligned like in your snippet, change text-align: center; to text-align: left;.
.rectangle {
width: 286px;
height: 180px;
margin-right: 2px;
margin-left: 2px;
margin-bottom: 24px;
background: #aeaeae;
display: inline-block;
}
.container {
/*display: flex;
width: max-content;*/
flex-wrap: wrap;
flex-direction: row;
margin-left: auto;
margin-right: auto;
text-align: center;
}
<div class="container">
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
</div>

Answer 3

.container {
display: flex;
width: max-content;
flex-wrap: wrap;
flex-direction: row;
margin-left: auto;
margin-right: auto;
}
#media only screen and (min-width: 294px) { .container {
width: 290px;
}}
#media only screen and (min-width: 584px) { .container {
width: 580px;
}}
#media only screen and (min-width: 874px) { .container {
width: 870px;
}}
#media only screen and (min-width: 1164px) { .container {
width: 1160px;
}}
.rectangle {
width: 286px;
height: 180px;
margin-right: 2px;
margin-left: 2px;
margin-bottom: 24px;
background: #aeaeae;
}
<div class="container">
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
</div>

Answer 4

Yes, you can achieve it in various ways without targeting media queries. Here is one example:
lets wrap the .rectangle in another div
<div class="container">
<div>
<div class="rectangle"></div>
</div>
<div>
<div class="rectangle"></div>
</div>
<div>
<div class="rectangle"></div>
</div>
<div>
<div class="rectangle"></div>
</div>
<div>
<div class="rectangle"></div>
</div>
</div>
Declare 25% width for each rectangle holding div:
*{
box-sizing: border-box;
}
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.container > div{
width: 25%; float: left; padding-right: 5px; margin-bottom: 24px; height: 180px;
}
.container > div::nth-child(4){
padding-right: 0;
}
.rectangle{background: green; height: 180px; }
Here is the codepen