Divs in css grid

Divs in css grid
0.0 0

#1

I might be misunerstanding how to use css grid but in all the examples I’ve seen you have to wrap elements in divs in order to get the grid to work. Can you target other html elements such as headers and p tags and target them by id? below is the link to a codepen where i got grid to work but I want to know if i can do it without so many divs.
https://codepen.io/dmoneyballer/pen/LrzezZ


#2

You do not have to wrap them in divs, but you would need to give them ids or classes, so you can specify the grid-area name. For example, you can replace the following html for the navigation menu:

      <nav id="navbar">
        <header>Things about JavaScript</header>
        <div id="JSA">
          <a href="#JavaScript-intro">JavaScript intro</a>
        </div>
        <div id="scopeA">
          <a href="#Scope">Scope</a>
        </div>
        <div id="methodA">
          <a href="#methods">Map, Filter, Reduce</a>
        </div>
        <div id="AjaxA">
          <a href="#Ajax-requests">Ajax requests</a>
        </div>
        <div id="MathA">
          <a href="#Math-object">Math object</a>
        </div>
      </nav>

with the following:

      <nav id="navbar">
        <header>Things about JavaScript</header>
          <a id="JSA" href="#JavaScript-intro">JavaScript intro</a>
          <a id="scopeA" href="#Scope">Scope</a>
          <a id="methodA" href="#methods">Map, Filter, Reduce</a>
          <a id="AjaxA" href="#Ajax-requests">Ajax requests</a>
          <a id="MathA" href="#Math-object">Math object</a>
      </nav>

Also, you can make your CSS a little more DRY (Do Not Repeat Yourself), by replacing:

#JSA{
    grid-area:  contenta;
    height: 1fr;
    border-style:solid;
    border-width: .5px;
    padding: 10px;
}
#scopeA{
  gird-area: contentb;
  height: 1fr;
  border-style:solid;
  border-width: .5px;
  padding: 10px;
}
#methodA{
  grid-area: contentc
  height: 1fr;
  border-style:solid;
  border-width: .5px;
  padding: 10px;
}
#AjaxA{
  grid-area: contentd
  height:1fr;
  border-style:solid;
  border-width: .5px;
  padding: 10px;
}
#MathA{
  grid-area: contente
  height:1fr;
  border-style:solid;
  border-width: .5px;
  padding: 10px;
}

with the following:

#JSA, #scopeA, #methodA, #AjaxA, #MathA{
  height: 1fr;
  border-style:solid;
  border-width: .5px;
  padding: 10px;
  display: block;
}
#JSA{
  grid-area: contenta;
}
#scopeA{
  gird-area: contentb;
}
#methodA{
  grid-area: contentc
}
#AjaxA{
  grid-area: contentd
}
#MathA{
  grid-area: contente
}

Lastly, you should shrink the width of your browser window when viewing your project, because you will find that the navigation menu starts overlapping the other content and the various sections of the content start overlapping into other sections. This is because your site is not responsive.


#3

When I have tried to reduce the css and be more DRY, it has ruined my grid. I don’t know why this occurs. I tried to make the website responsive by making the heights for the grid set to auto and now it appears to be responsive. I will add a media query so that when it’s viewed from mobile, (which is 767 pixels correct?), the navbar will go to the top instead of staying on the left. Before I do that I want to know if you can help me format it so it stays on the left in a way similar to the example for the technical documentation page? I tried to include it in the grid so that it stays there with putting it’s position to fixed but it’s going left to right not top to bottom… I really appreciate your feedback.