Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/grid below:

grid · WebPlatform Docs

Foundation of a two-dimensional grid-based layout system. Defines an element as part of a grid and permits those elements to be displayed differently than the flow order. Also used as a shorthand for setting all the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), as well as all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), in a single declaration. If the <grid-auto-rows> value is omitted, it is set to the value specified for grid-auto-columns. Other omitted values are set to their initial values.

Initial value

See individual properties

Applies to

Grid containers, Grid layout

Inherited

No

Media

visual

Computed value

See individual properties

Animatable

No

CSS Object Model Property
:

Percentages

See individual properties

• grid: <grid-auto-columns> / <grid-auto-rows>
• grid: <grid-auto-flow>
• grid: <grid-template>

<grid-template>

Itself a shorthand property, see grid-template for details.

<grid-auto-flow>

See grid-auto-flow for details.

<grid-auto-columns> / <grid-auto-rows>

See grid-auto-columns and grid-auto-rows for details.

#grid {
      display: grid;
      grid-template-columns: auto minmax(min-content, 1fr);
          grid-template-rows: auto minmax(min-content, 1fr) auto
  }
  #prdName    { grid-column: 1; grid-row: 1 }
  #grossPrice    { grid-column: 1; grid-row: 3 }
  #retailPrice   { grid-column: 1; grid-row: 2; justify-self: start }
  #discount    { grid-column: 2; grid-row: 1 / span 2; }
  #finalPrice { grid-column: 2; grid-row: 3; align-self: center}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4