“ Grid layouts to get you familiar with building within the flexible grid system. "

Introduction

Get started with Flexible Grid. Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexgrid utilities. For more complex implementations, custom CSS may be necessary.

HTML Starter Template

Start with this HTML template and adapt it to your needs.

        copy
        
    
            
                <!DOCTYPE html>
                <html lang="en">
                    <head>
                        <h1>Flexible Grid</title>
                        <!-- Required meta tags -->
                        <meta charset="utf-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1">
                        <!-- flexible grid css -->
                        <link href="css/flexible-grid.min.css" rel="stylesheet">
                    </head>
                    <body>
                        <h1>Hello, world!</h1>
                    </body>
                </html>
            

        
    

Responsive Meta Tag

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>

        copy
        
            <meta name="viewport" content="width=device-width, initial-scale=1">
        
    

Supported Browsers (Mobile)

Flexible Grid supports the latest, stable releases of all major browsers and platforms.

    • Chrome
    • Safari
    • Firefox
    • Opera
    • Microsoft Edge
    • iOS
    • Supported
    • Supported
    • Supported
    • Supported
    • Supported
    • Android
    • N/A
    • Supported
    • Supported
    • Supported
    • N/A
    • Windows Mobile
    • N/A
    • N/A
    • N/A
    • N/A
    • Supported

Supported Browsers (Desktop)

Flexible Grid supports the latest, stable releases of all major browsers and platforms.

    • Chrome
    • Safari
    • Firefox
    • Opera
    • Microsoft Edge
    • Internet Explorer
    • Mac
    • Supported
    • Supported(6.2+)
    • Supported
    • Supported
    • N/A
    • N/A
    • Windows
    • Supported
    • Not supported
    • Supported
    • Supported
    • Supported
    • Supported (10+)

Grid Screen Size

Grid layouts to get you familiar with building within the flexible grid system. On mobile devices, tablets and below, the columns will automatically stack.

    • Media Screen Size
    • XSmall
    • Small <768px
    • Medium <1024px
    • Large <1279px
    • XLarge <1366px
    • .column
    • .xs-1
    • .sm-1
    • .md-1
    • .lg-1
    • .xl-1
    • .column
    • .xs-2
    • .sm-2
    • .md-2
    • .lg-2
    • .xl-2
    • .column
    • .xs-3
    • .sm-3
    • .md-3
    • .lg-3
    • .xl-3
    • .column
    • .xs-4
    • .sm-4
    • .md-4
    • .lg-4
    • .xl-4
    • .column
    • .xs-5
    • .sm-5
    • .md-5
    • .lg-5
    • .xl-5
    • .column
    • .xs-6
    • .sm-6
    • .md-6
    • .lg-6
    • .xl-6
    • .column
    • .xs-7
    • .sm-7
    • .md-7
    • .lg-7
    • .xl-7
    • .column
    • .xs-8
    • .sm-8
    • .md-8
    • .lg-8
    • .xl-8
    • .column
    • .xs-9
    • .sm-9
    • .md-9
    • .lg-9
    • .xl-9
    • .column
    • .xs-10
    • .sm-10
    • .md-10
    • .lg-10
    • .xl-10
    • .column
    • .xs-11
    • .sm-11
    • .md-11
    • .lg-11
    • .xl-11
    • .column
    • .xs-12
    • .sm-12
    • .md-12
    • .lg-12
    • .xl-12

Grid Atribute Screen Size

Grid layouts to get you familiar with building within the flexible grid system. On mobile devices, tablets and below, the columns will automatically stack.

    • Flex Attribute Type
    • XSmall
    • Small <768px
    • Medium <1024px
    • Large <1279px
    • XLarge <1366px
    • .d-flex
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .d-inline-flex
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .flex-d-row
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .flex-d-row-reverse
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .flex-d-column
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • flex-d-column-reverse
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • flex-wrap
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .flex-wrap-reverse
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .flex-nowrap
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .justfy-content-start
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .justfy-content-end
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .justfy-content-center
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .justfy-content-baseline
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .justfy-content-around
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .justfy-content-between
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .align-items-start
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .align-items-end
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .align-items-center
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .align-items-baseline
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .align-items-stretch
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .align-self-start
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .align-self-end
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .align-self-center
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .align-self-baseline
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .align-self-stretch
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .align-content-start
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .align-content-end
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .align-content-center
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .align-content-between
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .align-content-around
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .flex-order-first
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .flex-order-last
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .flex-order-unordered
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .flex-ml-auto
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .flex-mr-auto
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .flex-mt-auto
    • -xs
    • -sm
    • -md
    • -lg
    • -xl
    • .flex-mb-auto
    • -xs
    • -sm
    • -md
    • -lg
    • -xl

Order Screen Size

Grid layouts to get you familiar with building within the flexible grid system. On mobile devices, tablets and below, the columns will automatically stack.

    • Order (0>12)
    • 0
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • order
    • -0
    • -1
    • -2
    • -3
    • -4
    • -5
    • -6
    • -7
    • -8
    • -9
    • -10
    • -11
    • -12

Hidden Screen Size

Grid layouts to get you familiar with building within the flexible grid system. On mobile devices, tablets and below, the columns will automatically stack.

    • Media Screen Size
    • XSmall
    • Small <768px
    • Medium <1024px
    • Large <1279px
    • XLarge <1366px
    • hidden
    • hidden-xs
    • hidden-sm
    • hidden-md
    • hidden-lg
    • hidden-xl

Opacity Screen Size

Grid layouts to get you familiar with building within the flexible grid system. On mobile devices, tablets and below, the columns will automatically stack.

    • Media Screen Size
    • XSmall
    • Small <768px
    • Medium <1024px
    • Large <1279px
    • XLarge <1366px
    • opacity-0
    • opacity-0-xs
    • opacity-0-sm
    • opacity-0-md
    • opacity-0-lg
    • opacity-0-xl
    • opacity-25
    • opacity-25-xs
    • opacity-25-sm
    • opacity-25-md
    • opacity-25-lg
    • opacity-25-xl
    • opacity-50
    • opacity-50-xs
    • opacity-50-sm
    • opacity-50-md
    • opacity-50-lg
    • opacity-50-xl
    • opacity-75
    • opacity-75-xs
    • opacity-75-sm
    • opacity-75-md
    • opacity-75-lg
    • opacity-75-xl
    • opacity-100
    • opacity-100-xs
    • opacity-100-sm
    • opacity-100-md
    • opacity-100-lg
    • opacity-100-xl

Postion Screen Size

Grid layouts to get you familiar with building within the flexible grid system. On mobile devices, tablets and below, the columns will automatically stack.

    • Media Screen Size
    • XSmall
    • Small <768px
    • Medium <1024px
    • Large <1279px
    • XLarge <1366px
    • position/absolute
    • absolute
    • absolute
    • absolute
    • absolute
    • absolute
    • position/absolute
    • absolute-xs
    • absolute-sm
    • absolute-md
    • absolute-lg
    • absolute-xl
    • position/relative
    • relative
    • relative
    • relative
    • relative
    • relative
    • position/relative
    • relative-xs
    • relative-sm
    • relative-md
    • relative-lg
    • relative-xl
    • top
    • top
    • top
    • top
    • top
    • top
    • top
    • top-xs
    • top-sm
    • top-md
    • top-lg
    • top-xl
    • right
    • right
    • right
    • right
    • right
    • right
    • right
    • right-xs
    • right-sm
    • right-md
    • right-lg
    • right-xl
    • bottom
    • bottom
    • bottom
    • bottom
    • bottom
    • bottom
    • bottom
    • bottom-xs
    • bottom-sm
    • bottom-md
    • bottom-lg
    • bottom-xl
    • left
    • left
    • left
    • left
    • left
    • left
    • left
    • left-xs
    • left-sm
    • left-md
    • left-lg
    • left-xl

Margin Screen Size

Grid layouts to get you familiar with building within the flexible grid system. On mobile devices, tablets and below, the columns will automatically stack.

    • Media Screen Size
    • XSmall
    • Small <768px
    • Medium <1024px
    • Large <1279px
    • XLarge <1366px
    • margin (10/20/30/40)
    • m-10-xs
    • m-10-sm
    • m-10-md
    • m-10-lg
    • m-10-xl
    • margin-top (10/20/30/40)
    • mt-10-xs
    • mt-10-sm
    • mt-10-md
    • mt-10-lg
    • mt-10-xl
    • margin-right (10/20/30/40)
    • mr-10-xs
    • mr-10-sm
    • mr-10-md
    • mr-10-lg
    • mr-10-xl
    • margin-bottom (10/20/30/40)
    • mb-10-xs
    • mb-10-sm
    • mb-10-md
    • mb-10-lg
    • mb-10-xl
    • margin-left (10/20/30/40)
    • ml-10-xs
    • ml-10-sm
    • ml-10-md
    • ml-10-lg
    • ml-10-xl

Padding Screen Size

Grid layouts to get you familiar with building within the flexible grid system. On mobile devices, tablets and below, the columns will automatically stack.

    • Media Screen Size
    • XSmall
    • Small <768px
    • Medium <1024px
    • Large <1279px
    • XLarge <1366px
    • padding (10/20/30/40)
    • p-10-xs
    • p-10-sm
    • p-10-md
    • p-10-lg
    • p-10-xl
    • padding-top (10/20/30/40)
    • pt-10-xs
    • pt-10-sm
    • pt-10-md
    • pt-10-lg
    • pt-10-xl
    • padding-right (10/20/30/40)
    • pr-10-xs
    • pr-10-sm
    • pr-10-md
    • pr-10-lg
    • pr-10-xl
    • padding-bottom (10/20/30/40)
    • pb-10-xs
    • pb-10-sm
    • pb-10-md
    • pb-10-lg
    • pb-10-xl
    • padding-left (10/20/30/40)
    • pl-10-xs
    • pl-10-sm
    • pl-10-md
    • pl-10-lg
    • pl-10-xl

Aspect Ratio Screen Size

Grid layouts to get you familiar with building within the flexible grid system. On mobile devices, tablets and below, the columns will automatically stack.

    • Aspect Ratio (1/1, 1/2, 1/3, 16/9)
    • 1/1
    • 1/2
    • 1/3
    • 16/9
    • padding-top
    • pt-1-1
    • pt-1-2
    • pt-1-3
    • pt-16-9

Width Screen Size

Grid layouts to get you familiar with building within the flexible grid system. On mobile devices, tablets and below, the columns will automatically stack.

    • Width (auto/25/50/75/100)
    • auto
    • 25%
    • 50%
    • 75%
    • 100%
    • width
    • w-auto
    • w-25
    • w-50
    • w-75
    • w-100

Height Screen Size

Grid layouts to get you familiar with building within the flexible grid system. On mobile devices, tablets and below, the columns will automatically stack.

    • Height (auto/25/50/75/100)
    • auto
    • 25%
    • 50%
    • 75%
    • 100%
    • height
    • h-auto
    • h-25
    • h-50
    • h-75
    • h-100

Text Align Screen Size

Grid layouts to get you familiar with building within the flexible grid system. On mobile devices, tablets and below, the columns will automatically stack.

    • Text Align (center, left, right)
    • center
    • left
    • right
    • text-align
    • ta-c
    • ta-l
    • ta-r