Center a grid inside a

Question

I'm trying to create an Etch-a-Skecth in in HTML, CSS and javascript. So I created a <div> and inside it, there's another one.
But when I tried to style it in CSS, I couldn't center it.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#bigGrid {
  display: grid;
  grid-template-columns: repeat(16, auto);
  grid-template-rows: auto;
  padding: 50px;
  width: 80px;
  height: 80px;
  border: 10px solid crimson;
}

.gridElement {
   background-color: rgba(255, 255, 255, 0.8);
   border: 1px solid rgba(0, 0, 0, 0.8);
   padding: 5px;
   background-color: rgb(184, 179, 179);
}

<div id="bigGrid">
   <div class="gridElement"></div>     
</div>

score 0 · Answer 1 · answered Apr 11 '20 at 18:22

0

Try this

#bigGrid {
 display: grid;
 grid-template-columns: repeat(16, auto);
 grid-template-rows: auto;
 padding: 45px 50px 50px 45px;
 width: 80px;
 height: 80px;
 border: 10px solid crimson;
}

answered Apr 11 '20 at 18:22

subhnet

116
7

score 0 · Answer 2 · answered Apr 11 '20 at 18:49

I copied your code into CodePen and I got a small grey box inside a larger box. If that is what you want, you could centre the element using the grid alone. You would just need to specify the fractions (frs) the grid would make, and then assign a start and endpoint to the child element.

I have changed it in mine so that it is 3 fractions of the big grid across, and 3 fractions of the big grid down. I then specified that the grid element should start at grid row and column 2 and end at grid row and column 3, centring it:

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

    #bigGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 160px;
    height: 160px;
    border: 10px solid crimson;
     }



 .gridElement {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  grid-row: 2/3;
   grid-column: 2/3;
  background-color: rgb(184, 179, 179);
  }

You can see the CodePen here: https://codepen.io/St3ph3n92/pen/YzyPgNG

Does this help?

When using the Grid, Firefox is better than Chrome. You can read more about it here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

Center a grid inside a

2 Answers2