css grid displaying different size in browser

Question

I am trying to create grid using CSS, my code is like below:

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
body {
  background-color: #6D695C;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAA3RSTlMmDQBzGIDBAAAAG0lEQVR42uXIIQEAAADCMHj/0NdkQMws0HEeAqvwAUGJthrXAAAAAElFTkSuQmCC);
  font-size: 100%;
  color: #333;
  font-family: Lato, Arial, sans-serif;
  padding: 0;
  margin: 0;
}

main {
  display: block;
  box-sizing: border-box;
  width: 90%;
  margin: 1em auto;
  padding: 1em 2em;
  color: #000;
  background-color: rgba(204, 204, 204, .7);
  border: .07em solid rgba(0, 0, 0, .5);
  border-radius: .5em;
}

button {
  text-align: center;
  font-size: 100%;
  border-radius: 1em;
  border: .1em solid #333;
  padding: 1em;
  width: 8em;
  margin: .25em;
  width: 23%;
}

button strong {
  display: block;
  box-sizing: border-box;
  line-height: 1.35;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  font-size: 200%;
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  margin: 0 auto;
  border: .1em solid #fff;
}

button:hover,
button:focus {
  background-color: #060;
  box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  color: #fff;
  outline: none;
}

#grid {
  display: -ms-grid;
  -ms-grid-columns: auto 1fr;
  -ms-grid-rows: auto 1fr auto;
  display: grid;
  grid-template-columns: auto minmax(min-content, 1fr);
  grid-template-rows: auto minmax(min-content, 1fr) auto;
}

#title {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  grid-column: 1;
  grid-row: 1;
}

#title1 {
  ms-grid-column: 2;
  -ms-grid-row: 1;
  grid-column: 2;
  grid-row: 1;
}

#title2 {
  ms-grid-column: 3;
  -ms-grid-row: 1;
  -ms-grid-row-align: start;
  grid-column: 3;
  grid-row: 1;
  align-self: start;
}

#controls {
  -ms-grid-column: 2;
  -ms-grid-row: 3;
  -ms-grid-column-align: center;
  grid-column: 2;
  grid-row: 3;
  justify-self: center;
}

#grid button {
  width: 100%;
  height: 100%;
  margin: 0;
}

#grid button:hover,
#grid button:focus {
  background-color: #600;
}

<main>

  <!--  <button>
    <strong>5</strong>
    <br> This appears fifth in source order.
  </button> -->
  <h2>Re-Ordered</h2>
  <div id="grid">
    <div id="title">
      <button>
        <strong>1</strong>
        <br> This appears first in source order.
      </button>
    </div>
    <div id="title1">
      <button>
        <strong>2</strong>
        <br> This appears second in source order.
      </button>
    </div>
    <div id="title2">
      <button>
        <strong>2</strong>
        <br> This appears second in source order.
      </button>
    </div>
  </div>

</main>

the first grid is coming as expected, but now the problem here is the other grids are showing in different size, I gave the same styling to all the grids. I want all the grid in same height and width. can anyone please tell me what could be wrong here. thanks in advance

Answer 1

Just use grid-template-columns: repeat(3,1fr); instead of using grid-template-columns: auto minmax(min-content, 1fr); the n it will create three equal columns

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
body {
  background-color: #6D695C;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAA3RSTlMmDQBzGIDBAAAAG0lEQVR42uXIIQEAAADCMHj/0NdkQMws0HEeAqvwAUGJthrXAAAAAElFTkSuQmCC);
  font-size: 100%;
  color: #333;
  font-family: Lato, Arial, sans-serif;
  padding: 0;
  margin: 0;
}

main {
  display: block;
  box-sizing: border-box;
  width: 90%;
  margin: 1em auto;
  padding: 1em 2em;
  color: #000;
  background-color: rgba(204, 204, 204, .7);
  border: .07em solid rgba(0, 0, 0, .5);
  border-radius: .5em;
}

button {
  text-align: center;
  font-size: 100%;
  border-radius: 1em;
  border: .1em solid #333;
  padding: 1em;
  width: 8em;
  margin: .25em;
  width: 23%;
}

button strong {
  display: block;
  box-sizing: border-box;
  line-height: 1.35;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  font-size: 200%;
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  margin: 0 auto;
  border: .1em solid #fff;
}

button:hover,
button:focus {
  background-color: #060;
  box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  color: #fff;
  outline: none;
}

#grid {
  display: -ms-grid;
  -ms-grid-columns: auto 1fr;
  -ms-grid-rows: auto 1fr auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto minmax(min-content, 1fr) auto;
}

#title {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  grid-column: 1;
  grid-row: 1;
}

#title1 {
  ms-grid-column: 2;
  -ms-grid-row: 1;
  grid-column: 2;
  grid-row: 1;
}

#title2 {
  ms-grid-column: 3;
  -ms-grid-row: 1;
  -ms-grid-row-align: start;
  grid-column: 3;
  grid-row: 1;
  align-self: start;
}

#controls {
  -ms-grid-column: 2;
  -ms-grid-row: 3;
  -ms-grid-column-align: center;
  grid-column: 2;
  grid-row: 3;
  justify-self: center;
}

#grid button {
  width: 100%;
  height: 100%;
  margin: 0;
}

#grid button:hover,
#grid button:focus {
  background-color: #600;
}

<main>

  <!--  <button>
    <strong>5</strong>
    <br> This appears fifth in source order.
  </button> -->
  <h2>Re-Ordered</h2>
  <div id="grid">
    <div id="title">
      <button>
        <strong>1</strong>
        <br> This appears first in source order.
      </button>
    </div>
    <div id="title1">
      <button>
        <strong>2</strong>
        <br> This appears second in source order.
      </button>
    </div>
    <div id="title2">
      <button>
        <strong>2</strong>
        <br> This appears second in source order.
      </button>
    </div>
  </div>

</main>