Using Grid, how do you remove the verticle white space gap that you can see?

[asasass]

Horizontal you can see it is not there, only vertical, how is that white space removed?

https://jsfiddle.net/w0xju1at/1/

[PaulOB]

If I understand what you want then just reduce the grid-template columns by 1px.

grid-template-columns:194px 194px 194px

[asasass]

How would I get

grid
https://jsfiddle.net/nubLpced/

To look like Flex?
https://jsfiddle.net/w0xju1at/1/

Can grid replicate that?

[ronpat]

Try this… (wild guess)

.container {
  display: grid;
  grid-template-columns: 195px 195px 195px;
  justify-content: center;
  overflow: hidden;
}

.a {
  position: relative;
  background-color: black;
/*  width: 150px; /* delete */
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}

[asasass]

That seems to work.
https://jsfiddle.net/38dvcuq9/

[PaulOB]

@asasass

That seems to work.

Yes but you are cutting off the box shadow and losing the nuance of that clever design. There needs to be a 2px margin around the button for the box-shadow to show (which was done in the original with the width).

Yours just doesn’t look right now.

[asasass]

I see what you mean now.

[PaulOB]

I think it should look like this:

e.g. add a margin here instead of the width.

.a {
  position: relative;
  background-color: black;
/*  width: 150px; /* delete */
margin:2px; 
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}