Complex grid layout

HTML-CSS
1

Good-day everyone , i am having an issue consigning my grid layout , i have a grid , that have children , and grand-children , the children respond fine when being manipulated with grid column and grid row. however, when i try to manipulate it grand-children with the column row and grid column , it doesn’t work that way , so i tried manipulating it with margin-left and right , then i observed , that using margin and padding affects, it parent element by shifting the parent element width. please , i want to know what is wrong with my layout and why the element in my layout dosen’t move freely .

/* html  */

  <section class="experience">
           <div class="h1-conatainer"> 
             <h1>Some Things I've Build</h1> 
          </div>

          <div class="experience-projects-container">
                <div class="project-1-details">
                    <p>app crations </p>
                    <h2> created an app</h2>
                  <div class="project-1-description">
                   fakjdkafkafjkdjfkdjkjkdfjfjaffdjjdjfafjfdakdfkakjfak
                   jkajkdgjkagkdlkajkldjfkadj
                    </div>
                    <div class="tools">
                      <ul>
                      <li> react </li>
                      <li> sass</li>
                      <li>Node.js</li>
                      <li>canvas</li>
                      </ul>
                        <svg></svg>
                        <svg></svg>
                      
                    </div>
                  </div>
                <div class = "project-img">
                  <a href="">
                    <div class="img-1-container">
                      <img src="unnamed.jpg"/>
                    </div>
                    
                  </a>

                </div>
          </div>

          </section>    

/* css */

 .expeerience{
    position: relative;
    width: 100%;
    height: 100vh;
    
   }

   .experience h1{
    font-size: var(--fz-xl);
    color: var(--lightest-slate);
    font-family: var(--font-sans);
   }

   .experience h1::before{
    content: "03.";
    color: var(--greem);
    font-family: var(--font-mono);
    font-size: var(--fz-sm);
    
   }
   

   .experience h1::after{
    content: "";
    display: block;
    border-top: 0.2px solid var(--dark-slate);
    position: relative;
    width: 300px;
    margin:  0em 11.5em;
    left: 0;
    bottom:  0.5em;
   }

   .experience-projects-container{
                  display: grid;
                  grid-template-columns: repeat(12, 1fr);
                  column-gap: normal;
                  position: relative;
                  top: 0;
                  left: 0;
                  -moz-box-align: center;
                  align-items: center;
                  margin-top: 100px;
                  width: 100%;
                }



                .project-1-details{
                  position: relative;
                  grid-column: 7 / 13;
                  align-self: center;


              }

              .project-1-details > * :not(.project-1-description){
                font-family: "Fira Code",monospace;
                margin-left: 60px;

               }

              
               .experience p:first-child{

               }

               .experience h2{
                
               }
              

              .experience .ssvvg , .experience button{
                height: 30px;
                width: 100px;
                color: green;
                margin-left: 400px;
              }

              .project-img, .project-1-details{
                grid-row: 1 / 2;
              }

              .project-img {
              grid-column: 9 / 1;

              }

                

                .project-1-description{
                  font-size: var(--fz-lg);
                  line-height: 2;
                  background-color: var(--lightest-slate);
                  height: 120px;
                  width: 500px;
                  text-align: right;
                }

                .tools ul {
                  display: flex;
                }

                .expeerience .project-img {
                  display: block;
                  position: relative;
                  left: 0;
                  bottom: 0;
                  z-index: -1;
                  max-width: 300px;
                  min-height: 55vh;
                
                }

                .project-img .img-1-container{
                  box-shadow: var(--box-shadow);

                 
                }

                .project-img .img-1-container img{
                  width: 90%;
                  height: 350px;
                }
2

Please have a look at the code below, it could be helpful.
– removed –

3

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

4

Only direct children of the grid container are grid items.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.