Do references to classes .item2, .item3, etc. in first try-it example under "Grid Lines" have any effect?

phunsoft · October 22, 2021

Hi,

Learning CSS with the help of W3Schools's great tutorials and exercices. I'm a bit confused about the first try-it example in topic "Grid Lines", which looks as follows:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>
</head>
<body>

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

<p>You can refer to line numbers when placing grid items.</p>

</body>
</html>

In the style part, attributes of only one item class, ".item1", are defined, but the HTML code refers to classes "item1", "item2", "item3", and so forth. As threre is no "item" class, except from "item1", all other references don't have any effect, right? What is the purpose of all thoe other "item" class references in this example?

Thanks

Peter

Ingolme · October 22, 2021

The class names were probably given so that you can change the code and try styling the other elements for practice.

Even if that weren't the case, it's good to treat all of the elements equally because you don't know if you'll want to style different elements in the future when redesigning your website.

phunsoft · October 22, 2021

That makes sense. Thanks.

Sign In

Do references to classes .item2, .item3, etc. in first try-it example under "Grid Lines" have any effect?

Recommended Posts

phunsoft

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

phunsoft

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity