Help photo grid

[digni-fy]

back at it again with yet another question lmao

so i want to make a 2x2 grid of pictures, but i cant manage to get them spaced evenly, etc, etc. i just want a little bit of space in between, and evenly sized squares for the pics. what's the best way to go about this?? atm this is what i have, and ive been fiddling with it for like an hour : (
here's a link to a tumblr moodboard as a sort of example just to there's like a visual i guess

Spoiler

[row][column=span4][div=background:url('https://i.imgur.com/VJNo0AB.jpg'); background-size:100%; width: 200px; height: 200px; margin: auto;center;] [/div][/column][column=span4][div=background:url('https://i.imgur.com/VJNo0AB.jpg'); background-size:100%; width: 200px; height: 200px; margin: auto;center;] [/div][/column][/row]

[row][column=span4][div=background:url('https://i.imgur.com/VJNo0AB.jpg'); background-size:100%; width: 200px; height: 200px; margin: auto;center;] [/div][/column][column=span4][div=background:url('https://i.imgur.com/VJNo0AB.jpg'); background-size:100%; width: 200px; height: 200px; margin: auto;center;] [/div][/column][/row]

 

[Alteras]

[nobr]
[div=display: grid; grid-template-columns: 200px 200px; grid-template-rows: 200px 200px; grid-gap: 10px;]
[div=background: url('https://i.imgur.com/VJNo0AB.jpg'); background-size:100%; position: relative; width: 100%; height: 100%;][/div]
[div=background: url('https://i.imgur.com/VJNo0AB.jpg'); background-size:100%; position: relative; width: 100%; height: 100%;][/div]
[div=background: url('https://i.imgur.com/VJNo0AB.jpg'); background-size:100%; position: relative; width: 100%; height: 100%;][/div]
[div=background: url('https://i.imgur.com/VJNo0AB.jpg'); background-size:100%; position: relative; width: 100%; height: 100%;][/div]
[/div]
[/nobr]

 

[digni-fy]

Alteras thank you!

 

[digni-fy]

god can someone tell me how to get that centered now im so sorry the easy little "center" code doesn't work for it and im still learning : (

 

[Alteras]

[nobr]
[div=display: grid; margin: 0 auto; width: 410px; grid-template-columns: 200px 200px; grid-template-rows: 200px 200px; grid-gap: 10px;]
[div=background: url('https://i.imgur.com/VJNo0AB.jpg'); background-size:100%; position: relative; width: 100%; height: 100%;][/div]
[div=background: url('https://i.imgur.com/VJNo0AB.jpg'); background-size:100%; position: relative; width: 100%; height: 100%;][/div]
[div=background: url('https://i.imgur.com/VJNo0AB.jpg'); background-size:100%; position: relative; width: 100%; height: 100%;][/div]
[div=background: url('https://i.imgur.com/VJNo0AB.jpg'); background-size:100%; position: relative; width: 100%; height: 100%;][/div]
[/div]
[/nobr]

you'd need to put in margin: 0 auto; and the width of it calculated width: 410px;

 

[digni-fy]

Alteras thanks again youre doing gods work bless up