CODEWITHSUNDEEP
htmlcsscss-grid
Mariano
Mariano

Reputation: 31

CSS Grid: Equal content names and area names for different grid-containers in the same page

I have a question regarding CSS grid. I was reading the specs, but it is not clear to me so far.

Suppose you have two different grid-container inside the same page, and you like to use similar names for named areas across them.

Maybe this is more clear.

.grid-container-1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas: 
                        "Header Header Header Header"
                        "Main-Space Mian-Space Main-Space Main-Space"
                        "Footer Footer Footer Footer";
}
.Header { grid-area: Header; }
.Main { grid-area: Main-Space; }
.Footer { grid-area: Footer; }

.grid-container-2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas: 
                        "Title Title Title"
                        "Main-Space Main-Space Main-Space"
                        "Info Info Info";
}
.Title { grid-area: Title; }
.Main { grid-area: Main-Space; }
.Info { grid-area: Info; }

I see two problems with that and a last question:

(a) Main-Space has same name in two different schemas.

(b) Main content, how it knows to which grid-container it belongs?

(c) How to avoid issues when you add 3rd party stylesheets into your webpages and they use equal names for contents or grid-containers like you?

Upvotes: 0

Views: 924

Answers (1)

kvncnls
kvncnls

Reputation: 261

Hopefully this helps. I used Mozilla Firefox to help me out with the Grid (you can see the image below).

Mozilla Grids

A) Having Main-Space on two different CSS grids is fine. The reason why it works is because you have two grids with different names: .grid-container-1 and .grid-container-2 and their respective .Main elements have no relation to each other other than general styling purposes. You can be as specific as you want as long as your provide the parent element when styling your elements. For example, in CSS: .grid-container-1 .Main will only target the .Main elements found in .grid-container-1.

B) The .Main content knows which grid-container it belongs to based on its parent element. In this case, any element with the class .Main will be positioned according to its parent element .grid-container-1 OR .grid-container-2. In my example, I've written a bit of extra code to differentiate the two grid systems. .grid-container-1 has a blue background. .grid-container-2 has a salmon background. I also wrote a bit more CSS to give the .Main elements different border colors to differentiate the .Main elements from each grid system. The .Main elements found in the .grid-container-1 have black borders. The .Main elements found in the .grid-container-2 have red borders. I've also written "1" and "2" in these divs respectively.

C) That's a difficult question to answer. You'll have to inspect every 3rd party stylesheet you add to your webpages to get a clearer answer.

Hopefully this makes sense, I'm new too!

.main-container {
  display: flex;
  width: 100%;
  justify-content: center;
}

div {
  font-size: 50px;
}

.grid-container-1 {
  background-color: cornflowerblue;
  height: 500px;
  width: 500px;
  padding: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas:
    "Header Header Header Header"
    "Main-Space Main-Space Main-Space Main-Space"
    "Footer Footer Footer Footer";
}

.grid-container-2 {
  background-color: coral;
  height: 500px;
  width: 500px;
  padding: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas:
    "Title Title Title"
    "Main-Space Main-Space Main-Space"
    "Info Info Info";
}

.Header {
  background-color: crimson;
  grid-area: Header;
}
.Main {
  background-color: greenyellow;
  grid-area: Main-Space;
}

.grid-container-1 .Main {
  border: 5px solid black;
}

.grid-container-2 .Main {
  border: 5px solid red;
}

.Footer {
  background-color: orangered;
  grid-area: Footer;
}
.Title {
  background-color: blueviolet;
  grid-area: Title;
}
.Info {
  background-color: teal;
  grid-area: Info;
}
<!DOCTYPE html>
<html class="no-js">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title></title>
</head>

<body>
  <div class="main-container">
    <div class="grid-container-1">
      <div class="Header"></div>
      <div class="Header"></div>
      <div class="Header"></div>
      <div class="Header"></div>
      <div class="Main">1</div>
      <div class="Main">1</div>
      <div class="Main">1</div>
      <div class="Main">1</div>
      <div class="Footer"></div>
      <div class="Footer"></div>
      <div class="Footer"></div>
      <div class="Footer"></div>
    </div>
    <div class="grid-container-2">
      <div class="Title"></div>
      <div class="Title"></div>
      <div class="Title"></div>
      <div class="Main">2</div>
      <div class="Main">2</div>
      <div class="Main">2</div>
      <div class="Info"></div>
      <div class="Info"></div>
      <div class="Info"></div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions