欧洲杯官网投注

Ionic Docs Docs

Native

Search docs/
Search docs/
Ionic Docs Docs
  • Structure
  • Responsive Grid
  • Global StylesheetsCSS Utilities
  • Basics
  • Platform Styles
  • CSS VariablesColorsThemesDark ModeAdvancedColor Generator
  • Overview
  • Build Your First App
    LifecycleNavigation/RoutingConfigPlatformTestingStoragePerformanceProgressive Web Apps
  • Overview
  • Quickstart
  • Build Your First App
    LifecycleNavigation/RoutingConfigPlatform UtilsProgressive Web AppsTesting
  • Overview
  • Build Your First App
  • LifecycleNavigation/Routing
  • Animations
  • Gestures
  • iOS App Store
  • Android Play StoreProgressive Web App (PWA)Electron Desktop App
  • Security
  • Debugging
  • Build ErrorsRuntime ErrorsNative ErrorsCORS Errors
  • Fundamentals
  • Cross PlatformWeb ViewWhat are PWAs?
  • How to Contribute
  • Code of Conduct
  • Glossary
  • VersioningRelease NotesGitHub Changelog
  • Support Policy
  • Browser Support
  • Migration
  • Books
  • CoursesGuidesPostsToolsVideos

    Responsive Grid

    Contents

    The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — agrid,row(s) andcolumn(s). Columns will expand to fill their row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.

    How it works

    <ion-grid>  <ion-row>    <ion-col>      <div>        1 of 3      </div>    </ion-col>    <ion-col>      <div>        2 of 3      </div>    </ion-col>    <ion-col>      <div>        3 of 3      </div>    </ion-col>  </ion-row></ion-grid>
    CopyCopied
  • Grids act as a container for all rows and columns. Grids take up the full width of their container,but adding thefixed attribute will specify the width per screen size, seegrid size below.
  • Rows are horizontal groups of columns that line the columns up properly.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • The size-{breakpoint} attributes indicate the number of columns to use out of the default 12 per row.So,size="4" can be added to a column in order to take up 1/3 of the grid, or 4 of the 12 columns.
  • Columns without a value for size will automatically have equal widths. For example, four instances ofsize-sm will each automatically be 25% wide for the small breakpoint and up.
  • Column widths are set as a percentage, so they’re always fluid and sized relative to their parent element.
  • Columns have padding between individual columns, however, the padding can be removed from the grid andcolumns by adding theion-no-padding class to the grid. See theCSS Utilities for more styles that can be applied to the grid.
  • There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
  • Grid tiers are based on minimum widths, meaning they apply to their tier and all those larger than them(e.g.,size-sm="4" applies to small, medium, large, and extra large devices).
  • Grids can easily be customized via CSS variables. See customizing the grid.
  • Grid size

    By default, the grid will take up 100% width. To set a specific width based on the screen size, add thefixed attribute. The width of the grid for each breakpoint is defined in the--ion-grid-width-{breakpoint} CSS variables. For more information, seecustomizing the grid.

    xs
    Name ValueDescription
    100%Don't set the grid width for xs screens
    sm540px Set grid width to 540px when (min-width: 576px)
    md720px Set grid width to 720px when (min-width: 768px)
    lg960px Set grid width to 960px when (min-width: 992px)
    xl1140px Set grid width to 1140px when (min-width: 1200px)

    Grid attributes

    The grid takes up the entire width of the screen by default. This can be modified using the attribute below.

    Property Description
    fixed Set a max width based on the current screen size.

    Default breakpoints

    The default breakpoints are defined in the table below. Breakpoints can not be customized at this time. For more information on why they can't be customized, seeVariables in Media Queries.

    xs
    Name ValueWidth Prefix Offset PrefixPush Prefix Pull PrefixDescription
    0size-offset-push-pull-Set columns when (min-width: 0)
    sm576px size-sm- offset-sm- push-sm- pull-sm- Set columns when (min-width: 576px)
    md768px size-md- offset-md- push-md- pull-md- Set columns when (min-width: 768px)
    lg992px size-lg- offset-lg- push-lg- pull-lg- Set columns when (min-width: 992px)
    xl1200px size-xl- offset-xl- push-xl- pull-xl- Set columns when (min-width: 1200px)

    Auto-layout columns

    Equal-width

    By default, columns will take up equal width inside of a row for all devices and screen sizes.

    <ion-grid>  <ion-row>    <ion-col>      <div>        1 of 2      </div>    </ion-col>    <ion-col>      <div>        2 of 2      </div>    </ion-col>  </ion-row>  <ion-row>    <ion-col>      <div>        1 of 3      </div>    </ion-col>    <ion-col>      <div>        2 of 3      </div>    </ion-col>    <ion-col>      <div>        3 of 3      </div>    </ion-col>  </ion-row></ion-grid>
    CopyCopied
    Setting one column width

    Set the width of one column and the others will automatically resize around it. This can be done using our predefined grid attributes. In the example below, the other columns will resize no matter the width of the center column.

    <ion-grid>  <ion-row>    <ion-col>      <div>        1 of 3      </div>    </ion-col>    <ion-col size="8">      <div>        2 of 3 (wider)      </div>    </ion-col>    <ion-col>      <div>        3 of 3      </div>    </ion-col>  </ion-row>  <ion-row>    <ion-col>      <div>        1 of 3      </div>    </ion-col>    <ion-col size="6">      <div>        2 of 3 (wider)      </div>    </ion-col>    <ion-col>      <div>        3 of 3      </div>    </ion-col>  </ion-row></ion-grid>
    CopyCopied
    Variable-width

    By setting the size-{breakpoint} properties to"auto" the column can size itself based on the natural width of its content. This is extremely useful for setting a column width using pixels. The columns next to the variable-width column will resize to fill the row.

    <ion-grid>  <ion-row>    <ion-col>      <div>        1 of 3      </div>    </ion-col>    <ion-col size="auto">      <div>        Variable width content      </div>    </ion-col>    <ion-col>      <div>        3 of 3      </div>    </ion-col>  </ion-row>  <ion-row>    <ion-col>      <div>        1 of 4      </div>    </ion-col>    <ion-col>      <div>        2 of 4      </div>    </ion-col>    <ion-col size="auto">      <div>        <ion-input placeholder="Variable width input"></ion-input>      </div>    </ion-col>    <ion-col>      <div>        4 of 4      </div>    </ion-col>  </ion-row></ion-grid>
    CopyCopied
    Responsive attributes

    All breakpoints

    To customize a column's width for all devices and screens, set thesize欧洲杯官网投注 property. The value of this property determines how many columns this column should take up out of the total available columns.

    <ion-grid>  <ion-row>    <ion-col size="4">      <div>        1 of 4      </div>    </ion-col>    <ion-col size="2">      <div>        2 of 4      </div>    </ion-col>    <ion-col size="2">      <div>        3 of 4      </div>    </ion-col>    <ion-col size="4">      <div>        4 of 4      </div>    </ion-col>  </ion-row></ion-grid>
    CopyCopied
    Stacked to horizontal

    Use a combination of width and breakpoint attributes to create a grid that starts out stacked on extra small screens before becoming horizontal on small screens.

    <ion-grid>  <ion-row>    <ion-col size="12" size-sm>      <div>        1 of 4      </div>    </ion-col>    <ion-col size="12" size-sm>      <div>        2 of 4      </div>    </ion-col>    <ion-col size="12" size-sm>      <div>        3 of 4      </div>    </ion-col>    <ion-col size="12" size-sm>      <div>        4 of 4      </div>    </ion-col>  </ion-row></ion-grid>
    CopyCopied
    Reordering

    Offsetting columns

    Move columns to the right by adding theoffset property. This property increases the margin left of the column by the number of specified columns. For example, in the following grid the last column will be offset by 3 columns and take up 3 columns:

    <ion-grid>  <ion-row>    <ion-col size="3">      <div>        1 of 2      </div>    </ion-col>    <ion-col size="3" offset="3">      <div>        2 of 2      </div>    </ion-col>  </ion-row></ion-grid>
    CopyCopied
    Offsets can also be added based on screen breakpoints. Here's an example of a grid where the last column will be offset by 3 columns formd欧洲杯官网投注 screens and up:

    <ion-grid>  <ion-row>    <ion-col size-md="3">      <div>        1 of 3      </div>    </ion-col>    <ion-col size-md="3">      <div>        2 of 3      </div>    </ion-col>    <ion-col size-md="3" offset-md="3">      <div>        3 of 3      </div>    </ion-col>  </ion-row></ion-grid>
    CopyCopied
    Push and pull

    Reorder the columns by adding thepush andpull properties. These properties adjust theleft andright of the columns by the specified number of columns making it easy to reorder columns. For example, in the following grid the column with the1 of 2 description will actually be the last column and the2 of 2 will be the first column.

    <ion-grid>  <ion-row>    <ion-col size="9" push="3">      <div>        1 of 2      </div>    </ion-col>    <ion-col size="3" pull="9">      <div>        2 of 2      </div>    </ion-col>  </ion-row></ion-grid>
    CopyCopied
    Push and pull can also be added based on screen breakpoints. In the following example, the column with the3 of 3 column description will actually be the first column formd screens and up:

    <ion-grid>  <ion-row>    <ion-col size-md="6" push-md="3">      <div>        1 of 3      </div>    </ion-col>    <ion-col size-md="3" push-md="3">      <div>        2 of 3      </div>    </ion-col>    <ion-col size-md="3" pull-md="9">      <div>        3 of 3      </div>    </ion-col>  </ion-row></ion-grid>
    CopyCopied
    Alignment

    Vertical alignment

    All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, seecss utilities.

    <ion-grid>  <ion-row class="ion-align-items-start">    <ion-col>      <div>        1 of 4      </div>    </ion-col>    <ion-col>      <div>        2 of 4      </div>    </ion-col>    <ion-col>      <div>        3 of 4      </div>    </ion-col>    <ion-col>      <div>        4 of 4 <br>        # <br>        # <br>        #      </div>    </ion-col>  </ion-row>  <ion-row class="ion-align-items-center">    <ion-col>      <div>        1 of 4      </div>    </ion-col>    <ion-col>      <div>        2 of 4      </div>    </ion-col>    <ion-col>      <div>        3 of 4      </div>    </ion-col>    <ion-col>      <div>        4 of 4 <br>        # <br>        # <br>        #      </div>    </ion-col>  </ion-row>  <ion-row class="ion-align-items-end">    <ion-col>      <div>        1 of 4      </div>    </ion-col>    <ion-col>      <div>        2 of 4      </div>    </ion-col>    <ion-col>      <div>        3 of 4      </div>    </ion-col>    <ion-col>      <div>        4 of 4 <br>        # <br>        # <br>        #      </div>    </ion-col>  </ion-row></ion-grid>
    CopyCopied
    Columns can also align themselves differently than other columns by adding the alignment class directly to the column. For a list of available classes, seecss utilities.

    <ion-grid>  <ion-row>    <ion-col class="ion-align-self-start">      <div>        1 of 4      </div>    </ion-col>    <ion-col class="ion-align-self-center">      <div>        2 of 4      </div>    </ion-col>    <ion-col class="ion-align-self-end">      <div>        3 of 4      </div>    </ion-col>    <ion-col>      <div>        4 of 4 <br>        # <br>        # <br>        #      </div>    </ion-col>  </ion-row></ion-grid>
    CopyCopied
    Horizontal alignment

    All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, seecss utilities.

    <ion-grid>  <ion-row class="ion-justify-content-start">    <ion-col size="3">      <div>        1 of 2      </div>    </ion-col>    <ion-col size="3">      <div>        2 of 2      </div>    </ion-col>  </ion-row>  <ion-row class="ion-justify-content-center">    <ion-col size="3">      <div>        1 of 2      </div>    </ion-col>    <ion-col size="3">      <div>        2 of 2      </div>    </ion-col>  </ion-row>  <ion-row class="ion-justify-content-end">    <ion-col size="3">      <div>        1 of 2      </div>    </ion-col>    <ion-col size="3">      <div>        2 of 2      </div>    </ion-col>  </ion-row>  <ion-row class="ion-justify-content-around">    <ion-col size="3">      <div>        1 of 2      </div>    </ion-col>    <ion-col size="3">      <div>        2 of 2      </div>    </ion-col>  </ion-row>  <ion-row class="ion-justify-content-between">    <ion-col size="3">      <div>        1 of 2      </div>    </ion-col>    <ion-col size="3">      <div>        2 of 2      </div>    </ion-col>  </ion-row></ion-grid>
    CopyCopied
    Customizing the grid

    Using our built-in CSS variables, it’s possible to customize the predefined grid attributes. Change the values of the padding, the number of columns, and more.

    Number of columns

    The number of grid columns can be modified with the --ion-grid-columns欧洲杯官网投注 CSS variable. By default there are 12 grid columns, but this can be changed to any positive integer and be used to calculate the width of each individual column.

    --ion-grid-columns:               12;
    CopyCopied
    Grid Padding

    The padding on the grid container can be set for all breakpoints with the--ion-grid-padding CSS variable. To override individual breakpoints, use the--ion-grid-padding-{breakpoint} CSS variables.

    --ion-grid-padding:               5px;--ion-grid-padding-xs:            5px;--ion-grid-padding-sm:            5px;--ion-grid-padding-md:            5px;--ion-grid-padding-lg:            5px;--ion-grid-padding-xl:            5px;
    CopyCopied
    Grid width

    To customize the width values of the fixed grid based on the screen size, override the values of--ion-grid-width-{breakpoint} for each breakpoint.

    --ion-grid-width-xs:              100%;--ion-grid-width-sm:              540px;--ion-grid-width-md:              720px;--ion-grid-width-lg:              960px;--ion-grid-width-xl:              1140px;
    CopyCopied
    Column Padding

    The padding on the columns can be set for all breakpoints with the--ion-grid-column-padding CSS variable. To override individual breakpoints, use the--ion-grid-column-padding-{breakpoint}欧洲杯官网投注 CSS variables.

    --ion-grid-column-padding:        5px;--ion-grid-column-padding-xs:     5px;--ion-grid-column-padding-sm:     5px;--ion-grid-column-padding-md:     5px;--ion-grid-column-padding-lg:     5px;--ion-grid-column-padding-xl:     5px;
    CopyCopied
    Previous
    Structure
    Next
    Global Stylesheets