How to remove margin in css grid. I am unable to solve the problem [duplicate]-CodePudding

I cannot marge the margin in row. Please solve the problem.

I add some css code , modify and help me.

#main{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    margin: 10px;
    grid-auto-rows: minmax(100px, auto);
    align-items: start;
    justify-items: start;
    
}


.child{
    border: 2px solid #000;
    border-radius: 10px;
    padding: 10px;
}

.child img{
    border-radius: 10px;
    width: 50%;
}

<div id="main" >


  <div class="child"><img src="https://images.unsplash.com/photo-1632239336383-5bfb856151f7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=869&q=80" alt="Image" >
  <span class="">Title</span>
  <p class="font-poppins text-gray-400 text-xs ">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur illo modi reiciendis nesciunt explicabo dolore harum in debitis sunt praesentium.</p>
  </div>






    <div class="child"><img src="https://images.unsplash.com/photo-1632231288605-b881ab02cb89?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80" alt="Image" >
      <span class="">Title</span>
      <p class="font-poppins text-gray-400 text-xs ">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur illo modi reiciendis nesciunt explicabo dolore harum in debitis sunt praesentium.</p>
      </div>


      <div class="child"><img src="https://images.unsplash.com/photo-1628191010210-a59de33e5941?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" alt="Image" >
        <span class="">Title</span>
        <p class="font-poppins text-gray-400 text-xs ">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur illo modi reiciendis nesciunt explicabo dolore harum in debitis sunt praesentium.</p>
        </div>


        <div class="child"><img src="https://images.unsplash.com/photo-1632177437111-814a9a72098e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80" alt="Image" >
          <span class="">Title</span>
          <p class="font-poppins text-gray-400 text-xs ">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur illo modi reiciendis nesciunt explicabo dolore harum in debitis sunt praesentium.</p>
          </div>

          <div class="child"><img src="thumbnails/3.jpg" alt="Image" >
            <span class="">Title</span>
            <p class="font-poppins text-gray-400 text-xs ">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur illo modi reiciendis nesciunt explicabo dolore harum in debitis sunt praesentium.</p>
            </div>
            
      <div class="child"><img src="https://images.unsplash.com/photo-1632285262390-4e142c2c7189?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=464&q=80" alt="Image" >
        <span class="">Title</span>
        <p class="font-poppins text-gray-400 text-xs ">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur illo modi reiciendis nesciunt explicabo dolore harum in debitis sunt praesentium.</p>
        </div>
            

</div> <!--  Last Main -->

I am trying to build a CSS grid layout with margins around the elements within the grid cells. However, severeal problems arise…

CodePudding user response：

Just remove align-items: start; (or use another property like "inherit")

CodePudding user response：

I understand you want to remove the margins inside the boxes. To solve this problem you can remove padding from .child class

.child{
    border: 2px solid #000;
    border-radius: 10px;
}