I'm facing a challenge in adding an action button to the end of a grid layout without affecting the centering of the items. The button should seamlessly fit into the grid, just slightly offset.
If you check out my demo, you'll see what I mean.
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.button {
margin-right: -120px;
width: 120px;
}
In the demo, by using a negative margin on the button, the items remain centered but the button spills out of the container and doesn't flow onto a new line correctly.
Does anyone have a clever solution for this layout issue? Can it be achieved with CSS only?
* {
box-sizing: border-box;
}
.flex-container {
padding: 0;
margin: auto;
list-style: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
max-width: 800px;
}
.flex-item {
border: 1px solid yellow;
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
.button {
margin-right: -120px;
width: 120px;
height: 150px;
font-size: 2em;
background: teal;
}<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<span class="flex-item button">Button</span>
</ul>