CSS Grid and Grid Features

The basic concepts of CSS Grid.
Grid Container: The element containing a grid, defined by setting display: grid;

Grid Item: the element that is a direct descendant of the aid container.

Grid Line: Horizontal rows or vertical column lines separating the grid into sections. These are sequenced by number, starting and ending with the outer boards of the grid. It can also be named for easier reference.

Grid Cell: The intersection between a gird row and a grid column. Efficiently the same as a table cell.

Grid Track: The space between two or more adjacent grid lines. Row track are horizontal, Column tracks are vertical.

Grid Area: Rectangular area between four specified gird lines. Grid areas can cover one or more cells.

Grid Gap: Empty space between grid tracks(shown in blue). Commonly called gutters.

There goes the following CSS Grid features:

CSS Grid brings outside-in, two-dimensional layouts to the web browser.

CSS Grid Features: Grid Items

  • Direct first-level descendants of the grid container.
  • Second-level descendants need their own gird.
  • Subgrids are not supported – no present road map.
  • Resist the urge to “flatten” your HTML to make every item a grid item.
  • Embrace nested grids.

CSS Grid Features: True Grids

  • Grid items adhere to strict columns and rows.

CSS Grid Features: Content Stacking.

  • Any fire item can be placed anywhere on the grid.
  • This includes placing one item on top of another.
  • Items are stacked according to the HTML source order.
  • Items can be recorded using the z-index property.

CSS Grid Features: Content Order.

  • Any grid item can be placed anywhere on the grid.
  • Manual placement is not impacted by the source order,
  • Make sure the visible content oder matched the source content order to preserve meaningful communication.

CSS Grid Features: Pure CSS Grids.

  • Grids are defined using the pure CSS.
  • Grids can be nested inside the media queries.
  • Grids can be applied conditionally.

Overview of the starting point

All the content from the exercise website is fully accessible, easy to read and to maintain, but it is not being displayed in a three column layout.

In order to make a three column layout, it have to do by defining a gidd on the main container, which would be the body element with the class site.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s