JeramiahBurke
March 19, 2023
175 views
0 votes
2 Answers

New to coding(css & html).i am trying to create a simple website layout but unable to get a section within my grid to span.Could anybody with experience help me figure out what i am doing wrong. Will upload code. Any addition pointers are welcome.

body {
  font-size: 20px;
  text-align: center;
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", Times, serif;
  background-color: rgb(216, 216, 216);
}

img {
  max-block-size: 30px;
}

header {
  padding: 30px;
  background-color: rgb(2, 171, 177);
  margin-bottom: 35px;
  text-align: left;
  font-weight: 600;
}

.grid-main {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr;
}

.grid-main div .prominant {
  background-color: rgb(63, 11, 11);
  grid-row-start: span 2;
}

.grid-main div {
  background-color: rgb(65, 82, 82);
  border: 10px;
}

footer {
  padding: 50px;
  background-color: rgb(75, 66, 54);
  margin-top: 50px;
  margin-bottom: ;
}

<!DOCTYPE html>
<html lang="en">

<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" />
  <title>Tri Diamon</title>
  <link rel="stylesheet" href="practicedocument.css" />
</head>

<body>
  <header>
    <img src="img/diamondlogo.png" alt="" /> Tri Diamond
  </header>
  <div class="grid-main">
    <div>
      <main class="prominant">
        Main
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cumque a corporis nam reprehenderit illum ipsa consequatur? Quos voluptatum perspiciatis hic quasi officia expedita beatae maiores, tempora esse placeat eaque laborum tenetur soluta ipsum porro
          velit. Sapiente excepturi dolorem eligendi exercitationem sequi doloribus suscipit cum optio ratione dolore quis laborum, accusamus ipsa pariatur voluptatem? Eos, quis ea. Voluptatibus, iste ratione laudantium ipsam, et provident dicta temporibus
          animi quos eaque pariatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cumque a corporis nam reprehenderit illum ipsa consequatur? Quos voluptatum perspiciatis hic quasi officia expedita beatae maiores, tempora esse placeat
          eaque laborum tenetur soluta ipsum porro velit. Sapiente excepturi dolorem eligendi exercitationem sequi doloribus suscipit cum optio ratione dolore quis laborum, accusamus ipsa pariatur voluptatem? Eos, quis ea. Voluptatibus, iste ratione laudantium
          ipsam, et provident dicta temporibus animi quos eaque pariatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cumque a corporis nam reprehenderit illum ipsa consequatur? Quos voluptatum perspiciatis hic quasi officia expedita
          beatae maiores, tempora esse placeat eaque laborum tenetur soluta ipsum porro velit. Sapiente excepturi dolorem eligendi exercitationem sequi doloribus suscipit cum optio ratione dolore quis laborum, accusamus ipsa pariatur voluptatem? Eos,
          quis ea. Voluptatibus, iste ratione laudantium ipsam, et provident dicta temporibus animi quos eaque pariatur.
        </p>
      </main>
    </div>
    <div>
      <section>
        Section
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex quod nemo saepe nostrum nihil et numquam, voluptatem dignissimos temporibus ipsam. Laborum, pariatur aspernatur. Perspiciatis aliquam quod obcaecati numquam voluptatem molestiae delectus impedit
          laborum quas dicta!
        </p>
      </section>
    </div>
    <div>
      <article>
        Article
        <p class="art">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae sunt magni, ut similique dolores tempore repudiandae possimus distinctio quam praesentium ducimus hic cumque illo ea officiis? Assumenda, culpa, minima quaerat eveniet at porro atque
          id modi aperiam, dicta obcaecati quasi.
        </p>
      </article>
    </div>
    <div>
      <nav>
        Navigation
        <ul>
          <li>Virtual Tour</li>
          <li>Check Avaliability</li>
        </ul>
      </nav>
    </div>
  </div>
  <div>
    <footer>Footer</footer>
  </div>
</body>

</html>

For the Grid box that is title Main to span across 2 sections along with how to control what section it spans too

Answers

Is this what you want?

How I found the bug

First thing I did, is going to devtools (I suggest you to do it also for debugging) and I saw this warning:

So with some changes I found the solution, here details below:

The issue seems to happen from the wrap of each section in a div.

To properly implement CSS grid, the relevant code should be placed in .grid-main div {}.

This selector ensures that the parent has display: grid,

as previously, the wrapped elements were contained within a block element.

However, I have found a simpler solution to your problem.

By removing the div that encloses the first element with the class="prominant" the issue can be resolved.

Please note that I opted for this approach since the gray background is unnecessary given that the main is already brown.

TLDR:

so html will be like this:

<div class="grid-main">
  <main class="prominant">...</main> <!-- NOT wrapped by <div> -->
  
  <div>
    <section>...</section>
  </div>
  
  <div>
    <article>...</article>
  </div>
  
  <div>
    <nav>...</nav>
  </div>
  
  <div>
    <footer>...</footer>
  </div>
</div>

and the css like this:

/*
.grid-main div .prominant {
  background-color: rgb(63, 11, 11);
  grid-row-start: span 2;
}
*/

.grid-main .prominant {
  background-color: rgb(63, 11, 11);
  grid-row-start: span 2;
}

.grid-main div {
  background-color: rgb(65, 82, 82);
  border: 10px;
}

complete code:

body {
  font-size: 20px;
  text-align: center;
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", Times, serif;
  background-color: rgb(216, 216, 216);
}

img {
  max-block-size: 30px;
}

header {
  padding: 30px;
  background-color: rgb(2, 171, 177);
  margin-bottom: 35px;
  text-align: left;
  font-weight: 600;
}

.grid-main {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr;
}

.grid-main .prominant {
  background-color: rgb(63, 11, 11);
  grid-row-start: span 2;
}

.grid-main div {
  background-color: rgb(65, 82, 82);
  border: 10px;
}

footer {
  padding: 50px;
  background-color: rgb(75, 66, 54);
  margin-top: 50px;
  /* margin-bottom: ; */
}

<!DOCTYPE html>
<html lang="en">

<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" />
  <title>Tri Diamon</title>
  <link rel="stylesheet" href="practicedocument.css" />
</head>

<body>
  <header><img src="img/diamondlogo.png" alt="" /> Tri Diamond</header>
  <div class="grid-main">
    <main class="prominant">
      Main
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cumque a corporis nam reprehenderit illum ipsa consequatur? Quos voluptatum perspiciatis hic quasi officia expedita beatae maiores, tempora esse placeat eaque laborum tenetur soluta ipsum porro
        velit. Sapiente excepturi dolorem eligendi exercitationem sequi doloribus suscipit cum optio ratione dolore quis laborum, accusamus ipsa pariatur voluptatem? Eos, quis ea. Voluptatibus, iste ratione laudantium ipsam, et provident dicta temporibus
        animi quos eaque pariatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cumque a corporis nam reprehenderit illum ipsa consequatur? Quos voluptatum perspiciatis hic quasi officia expedita beatae maiores, tempora esse placeat eaque
        laborum tenetur soluta ipsum porro velit. Sapiente excepturi dolorem eligendi exercitationem sequi doloribus suscipit cum optio ratione dolore quis laborum, accusamus ipsa pariatur voluptatem? Eos, quis ea. Voluptatibus, iste ratione laudantium
        ipsam, et provident dicta temporibus animi quos eaque pariatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cumque a corporis nam reprehenderit illum ipsa consequatur? Quos voluptatum perspiciatis hic quasi officia expedita beatae
        maiores, tempora esse placeat eaque laborum tenetur soluta ipsum porro velit. Sapiente excepturi dolorem eligendi exercitationem sequi doloribus suscipit cum optio ratione dolore quis laborum, accusamus ipsa pariatur voluptatem? Eos, quis ea.
        Voluptatibus, iste ratione laudantium ipsam, et provident dicta temporibus animi quos eaque pariatur.
      </p>
    </main>
    <div>
      <section>
        Section
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex quod nemo saepe nostrum nihil et numquam, voluptatem dignissimos temporibus ipsam. Laborum, pariatur aspernatur. Perspiciatis aliquam quod obcaecati numquam voluptatem molestiae delectus impedit
          laborum quas dicta!
        </p>
      </section>
    </div>
    <div>
      <article>
        Article
        <p class="art">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae sunt magni, ut similique dolores tempore repudiandae possimus distinctio quam praesentium ducimus hic cumque illo ea officiis? Assumenda, culpa, minima quaerat eveniet at porro atque
          id modi aperiam, dicta obcaecati quasi.
        </p>
      </article>
    </div>
    <div>
      <nav>
        Navigation
        <ul>
          <li>Virtual Tour</li>
          <li>Check Avaliability</li>
        </ul>
      </nav>
    </div>
  </div>
  <div>
    <footer>Footer</footer>
  </div>
</body>

</html>

I think that it will be easiest and more visible to use for page layout grid-template-areas + grid-area.
For example, like this 👇:

.page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  grid-template-areas: 
    "header header"
    "main   section"
    "main   article"
    "nav    empty"
    "footer footer"
  ;
}

/* do not need */
.page * {
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  grid-area: header;
  background-color: green;
}

.main {
    grid-area: main;
    background-color: orange;
}

.section {
    grid-area: section;
    background-color: gray;
}

.article {
    grid-area: article;
    background-color: purple;
}

.nav {
    grid-area: nav;
    background-color: yellow;
}

.footer {
    grid-area: footer;
    background-color: blue;
}

<div class="page">
    <header class="header">header</header>
    <main class="main">main</main>
    <section class="section">section</section>
    <article class="article">article</article>
    <nav class="nav">nav</nav>
    <footer class="footer">footer</footer>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

I am trying to create a simple website grid layout. The issue is am unable to get a section within my grid to span .Please assist – Html

Answers

Is this what you want?

How I found the bug

TLDR:

complete code: