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