CODEWITHSUNDEEP
htmlcss
ejromm
ejromm

Reputation: 1

Having trouble stacking all items using CSS grid

I'm trying to stack all of my elements in my Rock Paper Scissors homepage, so that they eventually animate and appear one after another in this order: Rock, Paper, Scissors, Begin. I can get every element to stack on each other except for the "Begin". I have every piece on the same grid column and row, what am I doing wrong?

* {
  font-size: 200px;
  font-family: Arial;
  background-color: dark red;
  font-weight: 900;
}

body {
  margin: 0;
  padding: 0;
  display: grid;
}

#title-rock {
  background: url(https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/shiny-black-rocks-micha-pawlitzki.jpg);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
}

#title-paper {
  background: url(https://thumbs.dreamstime.com/b/shoot-wrinkled-paper-texture-177335074.jpg);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
}

#title-scissors {
  background: url(https://images.freecreatives.com/wp-content/uploads/2016/01/Scratched-Shiny-Metal-Plate-Texture.jpg);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
}

#begin {
  color: black;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
}
<h1 class="title-text" id="title-rock">ROCK</h1>
<h1 class="title-text" id="title-paper">PAPER</h1>
<h1 class="title-text" id="title-scissors">SCISSORS</h1>
<h1 class="title-text"><a id="begin" href="game.html">BEGIN</a>

Upvotes: 0

Views: 127

Answers (1)

3tw
3tw

Reputation: 136

The problem is, <a> is not a grid item in your example, because it is not a direct descendant of the grid. Instead, you should apply grid item properties to its parent, <h1>, which is a grid item in this case.

 <h1 class="title-text"><a id="begin" href="game.html">BEGIN</a></h1>

We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this, all direct children of that element become grid items.

The emphasis is on direct children. <a> is not a direct child of the grid container, but <h1> is. You can learn more about basic grid concepts here.

As you can see, there are 4 grid items in your case and they all have class title-text. To avoid repetition simply write

.title-text {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
}

You can now remove these properties elsewhere in your style.css (#title-rock, ... ). Finally, move background-color: darkred; from * {...} to body {...}.

Additional notes:

To play with the 'depth' of the grid items (z-order to be precise), you can try adding z-index to #title-rock or any other item. You can read more about z-index here.

Upvotes: 1

Related Questions