AakashRao-dev

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  
  /* Using repeat function to rewrite the template columns */
  grid-template-columns: repeat(12, 1fr);

AakashRao-dev

Keybase proof

I hereby claim:

• I am Aakashrao-dev on github.
• I am aakash_codes (https://keybase.io/aakash_codes) on keybase.
• I have a public key whose fingerprint is 829D BF89 FEF6 5B6F 11D4 4649 46F3 65EB B732 B56D

To claim this, I am signing this object:

AakashRao-dev

<div class="container">
  <h1>Internal Spacing or Padding</h1>

  <div class="box">
    <div class="p-top">
      <div></div>
      <p>padding-top: 30px;</p>
    </div>

    <div class="p-right">

AakashRao-dev

<div class="container">
  <h1>External Spacing or Margin</h1>

  <div class="box">
    <div class="m-top">
      <div></div>
      <div></div>
      <p>margin-top: 60px;</p>
    </div>

AakashRao-dev

<section class="section">
  <h2>Flexbox with gap!</h2>

  <!-- Start flexbox layout -->
  <div class="flex flex-gap">
    <div class="item content">Item</div>
    <div class="item content">Longer Item</div>
    <div class="item content">Even Longer Item</div>
    <div class="item content">Item</div>
    <div class="item content">Longer Item</div>

AakashRao-dev

<div class="section">
  <h1>CSS Grid Layout with Gap</h1>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>

AakashRao-dev

<div class="container">
  <h1>Spacing with Text</h1>

  <div class="normal-text">
    <h2>Normal text</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta veritatis in beatae doloremque ipsa qui odit quas dolorem. Ad, quaerat?</p>
  </div>

  <!--  LINE HEIGHT  -->
  <div class="line__height--with">

AakashRao-dev

<section class="container">
  <h1>Spacing with column layout</h1>
  <article>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure ratione dolor et quas modi aut aperiam accusantium, 
    commodi nisi facere libero reprehenderit ducimus nemo amet dolores recusandae harum architecto. Minima et explicabo similique. 
    Qui itaque praesentium dignissimos aperiam tenetur quod ex natus modi, possimus voluptatem exercitationem iste non dolorum at 
    corporis nostrum beatae debitis fugiat? Beatae, ducimus! Omnis consequuntur, quos officiis doloribus assumenda libero debitis 
    impedit pariatur cupiditate quasi amet aspernatur incidunt nihil suscipit possimus similique sed dolore veniam deserunt molestiae 
    facilis ipsam eius tempore. Tenetur iste atque assumenda eos similique a ipsam. Molestias nihil officiis necessitatibus temporibus 
    harum eos?
  </article>

AakashRao-dev

<div class="container">
  <h1>Margin collapsing in CSS</h1>
  <!--  Normal container  -->
  <div class="sub-container">
    <div class="box-normal">
      <h2>Normal Container</h2>
      <p class="first-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque illo quod praesentium porro hic voluptatibus ex consequatur. Nam, quisquam excepturi.</p>
      <p class="second-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque illo quod praesentium porro hic voluptatibus ex consequatur. Nam, quisquam excepturi.</p>
    </div>

AakashRao-dev

<div class="container">
  <h2>Normal Buttons</h2>
  <button class="button">Send the mail</button>
  <button class="button">Remove changes</button>

  <h2>Using Abstracted components</h2>
  <div class="button__container">
    <div class="button__item">
      <button class="button">Send the mail</button>
    </div>