I'm trying to achieve a grid container that always stays centered while the elements with fixed width float left, even when breaking. In my example, the alignment is off and not centered. Can this be fixed with CSS only or do I need to use JavaScript? Thank you.
Here's what I mean:
#wrap {
width: 100%;
background: #f8f8f8;
height: 300px;
}
#container {
width: 100%;
max-width: 400px;
background: #f1f1f1;
margin: auto;
}
#item {
background: white;
height: 50px;
width: 50px;
float: left;
padding: 5px;
}
#item1 {
width: 100%;
height: 100%;
background: red;
}<div id="wrap">
<div id="container">
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
</div>
</div>