qr-code

Community feedback

• 

  P

  Gillian Oliveira•260

  @lia-oliveiraPosted 5 months ago

  Think of CSS Grid as a parent and child relationship. On the parent, you define the grid and its properties. On the child, you specify how the elements will be arranged.

  You can also nest one grid inside another without any issues if needed. Column measurements can be in fr, px, ... or even a mix of these units.

  For more details, check out the complete guide on CSS-Tricks—it’s a great resource to explore all the possibilities and learn more about this. I hope this helps!Grid Layout Guide: https://css-tricks.com/snippets/css/complete-guide-grid/

  Example:

   CSS Reset: Ensures consistent styles across different browsers */
  *,
  html,
  body {
      margin: 0; 
      padding: 0;
      box-sizing: border-box; 
  }
  
  .father {
      min-height: 100vh; 
      display: grid; /* Declares the parent container as a grid layout */
      grid-template-columns: 1fr; /* Creates a single column that spans the entire width of the grid */
      align-items: center; /* Vertically centers the content within the grid */
      justify-items: center; /* Horizontally centers the content within the grid */
  }
  
  .son {
      width: 50vw; 
      height: 30vh; 
      color: aliceblue;
      background-color: #4682B4;
  }
  

   <div class="father">
       <div class="son">
           <h1>Title</h1>
           <p>Description</p>
       </div>
   </div>
  

  Marked as helpful

  0

  ---

  

  Deevyne21•10

  @Deevyne21Posted 5 months ago

  @lia-oliveira Thank you so much for your feedback and help alongside the resources It will be a great help to learn and master CSS. You've done well

  1