CODEWITHSUNDEEP
css-grid
SavBeck
SavBeck

Reputation: 51

CSS grid question. I need to place two squares, offset from each other, in the center of my page

.container {
  border: 2px solid black;
  background-color:lightgrey;
  width: 350px;
  height:350px;
  display: grid;
  grid-tmplate-columns: [col1] 35px [col2-end col3-start] 20px [col3-end col4-start] 50% [col4-end col5-start] 20px [col5-end col6-start] 35px [col6-end end];
  
  grid-tmplate-rows: [start] 35px [2-end row3-start] 20px [row3-end row4-start] 50% [row4-end row5-start] 20px [row5-end row6-start] 35px [row6-end end];
}

.child-one {
  opacity:30%;
  border: 2px solid blue;
  background-color: lightblue;
  width: 50px;
  height: 50px;
  grid-column-start: col2-end;
  grid-column-end: col5-start;
  grid-row-start: row1-end;
  grid-row-end: row4-end;
}

.child-two {
  border: 2px solid #66CDAA;
  background-color: seagreen;
  width: 50px;
  height: 50px;
  grid-column-start: col3-end;
  grid-column-end: col6-start;
  grid-row-start: row2-end;
  grid-row-end: row6-end;
}
<div class="container">
  <div class="child-one">Bottom</div>
  <div class="child-two">Top</div>
</div>

I want to code a design where there are two squares offset from each other, but have those two squares be placed in the center of the page. I thought this sounded like a good time to get into understanding CSS grid.

I am practicing what I need to do in code pen(https://codepen.io/SavBeck/pen/YzxBOXE?editors=1100). I made some html with a container and two item/children.

I'm placing the code snippet, below. I defined the column and row lines, naming them in square brackets.

My problem is that my .child-one and .child-two are sitting on top of each other, even though I'm telling them to start and end on different rows/columns.

Can anyone point out what I'm doing wrong? Please and thank you for your time.

I'm new to this.

Upvotes: 0

Views: 117

Answers (1)

vals
vals

Reputation: 64174

Just open the dev-tools and inspect the styles.

You will see this:

dev tools image

the styles should be "template", not tmplate

Upvotes: 1

Related Questions