CSS grid layout last item center [duplicate]

Answer 1

You can select the last .box in your DOM to span across both columns.

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  gap: 10px;
}

.box {
  padding: 20px;
  background-color: burlywood;
  border: 1px solid red;
}

.container .box:last-child {
 justify-self: center;
 width: calc(200px - 20px);
 grid-column-start: span 2;
}

<div class="container">
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
</div>

The main piece of code to look at here is this:

.container .box:last-child {
 justify-self: center;
 width: calc(200px - 20px);
 grid-column-start: span 2;
}

grid-column-start tells the browser to render where the very left side of the .box start from based on your grid. Using span 2 says that the .box will start from its natural position and span 2 columns.

Answer 2

There are different ways to do it, but check out my code below with flexboxes. justify-content: space-around made it center

        .container{
            max-width: 500px;
            background: red;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: middle;
            justify-content: space-around
        }

        .box{
            padding: 20px;
            background-color: burlywood;
            border: 1px solid red;
            width: 200px

        }

<div class="container">
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
    <div class="box">Lorem Lipsum</div>
</div>