Skip to content

Instantly share code, notes, and snippets.

@luckyshot

luckyshot/flexbox.css

Created September 14, 2020 08:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save luckyshot/6344bbfb09bcf98a12948100e3740ab9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save luckyshot/6344bbfb09bcf98a12948100e3740ab9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. luckyshot created this gist Sep 14, 2020.
    19 changes: 19 additions & 0 deletions flexbox.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    .flex-grid {
    display: flex;
    }
    .col {
    flex: 1;
    }

    /* Break on mobile? */
    @media (max-width: 400px) {
    .flex-grid {
    display: block;
    }
    }


    /*
    Credits, gutters, margins and more:
    https://css-tricks.com/dont-overthink-flexbox-grids/
    */
    5 changes: 5 additions & 0 deletions flexbox.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <div class="flex-grid">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    </div>