<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
h1 {
text-align: center;
margin-top: 10px;
}
/* arrange boxes of container
in three column form*/
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/* starting position for first container*/
.initial {
place-items: start;
}
/* middle position for second container*/
.middle {
place-items: center;
}
/* ending position for third container*/
.end {
place-items: end;
}
.box {
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
background-color: #829099;
}
</
style
>
</
head
>
<
body
>
<
h1
>Place-items in start</
h1
>
<
div
class
=
"container initial"
>
<
div
class
=
"box"
>Item 1</
div
>
<
div
class
=
"box"
>Item 2</
div
>
<
div
class
=
"box"
>Item 3</
div
>
</
div
>
<
h1
>Place-items in middle</
h1
>
<
div
class
=
"container middle"
>
<
div
class
=
"box"
>Item 1</
div
>
<
div
class
=
"box"
>Item 2</
div
>
<
div
class
=
"box"
>Item 3</
div
>
</
div
>
<
h1
>Place-items in end</
h1
>
<
div
class
=
"container end"
>
<
div
class
=
"box"
>Item 1</
div
>
<
div
class
=
"box"
>Item 2</
div
>
<
div
class
=
"box"
>Item 3</
div
>
</
div
>
</
body
>
</
html
>