spliner

.block--mod {
  color: white;
}

.block__elem--mod {
  color: green;
}

spliner

<div class="block block--mod">
    ...
    <span class="block__elem block__elem--mod"></span>
</div>

spliner

.block__elem { 
    color: blue;
    width: 100px;
}

spliner

<div class="block">
  ...
  <span class="block__elem"></span>
</div>

spliner

<div class="block">
  ...
</div>

spliner

.block {
    color: red;
}

spliner

header {
    grid-area: header;
}

nav {
    grid-area: nav;
}

main {
    grid-area: content;

spliner

.wrapper {
    display: grid;
    grid-template-areas: 
        "header header header" 
        "nav content side" 
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;
    height: 300px;

spliner

<div class="wrapper">
    <header>
        <p>Header</p>
    </header>
    <nav>
        <p>Nav</p>
    </nav>
    <main>
        <p>Main</p>
    </main>

spliner

.box1 {
  grid-column-start: main-start;
  grid-row-start: main-start;
  grid-row-end: main-end;
}

.box2 {
  grid-column-start: content-end;
  grid-row-start: main-start;
  grid-row-end: content-end;