Skip to content

Instantly share code, notes, and snippets.

@AakashRao-dev

AakashRao-dev/index.html

Created January 8, 2023 15:27
Show Gist options
  • Save AakashRao-dev/db86e74b6e6ece12cdbd68b236705b56 to your computer and use it in GitHub Desktop.
Save AakashRao-dev/db86e74b6e6ece12cdbd68b236705b56 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. AakashRao-dev created this gist Jan 8, 2023.
    25 changes: 25 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    <div class="container">
    <div class="min-container">
    <h2>Applying min() to set gap</h2>
    <div>Item-1</div>
    <div>Item-2</div>
    <div>Item-3</div>
    <div>Item-4</div>
    <div>Item-5</div>
    </div>

    <div class="max-container">
    <h2>Applying max() to set gap</h2>
    <div>Item-1</div>
    <div>Item-2</div>
    </div>

    <div class="clamp-container">
    <h2>Applying clamp() to set gap</h2>
    <div>Item-1</div>
    <div>Item-2</div>
    <div>Item-3</div>
    <div>Item-4</div>
    <div>Item-5</div>
    </div>
    </div>
    88 changes: 88 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    :root {
    --spacing: 1rem;
    }

    /* USING MIN() FUNCTION TO SET GAP FOR GRID ITEMS INSIDE MIN-CONTAINER */
    .min-container {
    gap: min(
    5px,
    10%
    ); /* elements will have a gap of at least 5 pixels or 10% of the parent element's width, whichever is larger */
    }

    /* USING MAX() FUNCTION TO SET GAP FOR GRID ITEMS INSIDE MAX-CONTAINER */
    .max-container {
    gap: max(
    20px,
    10%
    ); /* elements will have a gap of at most 50px pixels or 10% of the parent element's width, whichever is smaller */
    }

    /* USING MAX() FUNCTION TO SET GAP FOR GRID ITEMS INSIDE MAX-CONTAINER */
    .clamp-container {
    gap: clamp(
    5px,
    10%,
    10px
    ); /* element will have a gap of at least 5 pixels, at most 20 pixels, and otherwise a value between 5 pixels and 20 pixels, as determined by the percentage value */
    }

    /* ============================= */
    /* =========OTHER STYLES======== */

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    html,
    body {
    height: 100%;
    }

    body {
    font-family: sans-serif;
    color: #262626;
    }

    .container {
    min-height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing);
    padding: var(--spacing);
    place-items: center;
    border: 16px ridge #ff6550;
    background: #ffe7e7;
    }

    .container > div {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    background: #ea5b4853;
    padding: var(--spacing);
    }

    .container > div > div {
    width: 100%;
    height: 100px;
    background: #222;
    color: #eee;
    }

    h1 {
    margin-bottom: var(--spacing);
    font-weight: 900;
    }

    h1,
    h2 {
    text-align: center;
    }

    h2 {
    grid-column: 1 /-1;
    padding: 20px 0;
    }