Easy and Simple Css Grid Fr Tutorials
The following examples include an image of how the example should look in a supporting browser, they each link to a page with more information about the technique being shown, code and a CodePen of the example. Unless otherwise noted these examples work in any browser supporting the up to date Grid Specification. They will not work in IE10 or 11.
For page layout examples see a collection of page layouts here.
Defining a Grid
To define a grid use new values of the display property `grid` or `inline-grid`. You can then create column and row tracks.
Line-based placement
Positioning items on the grid using line numbers
Line-based placement shorthand - grid-row and grid-column
Positioning items on the grid using the shorthand properties.
Line-based placement shorthand - grid-area
Positioning items on the grid using the shorthand properties.
Line-based placement spanning tracks
Positioning items which span more than one grid track.
Line-based placement spanning tracks with the span keyword
The span keyword gives us a way to span tracks without needing to specify start and end lines.
Line-based placement named lines
In addition to using line numbers we can name lines.
Line-based placement named lines with spans
You can give lines the same name and then use the span keyword to target lines of a certain name.
Using repeat notation
Save some time by describing repetitive track listings with repeat.
Explicit and Implicit Grid
The explicit grid is defined by `grid-template-rows` and `grid-template-columns`.
Defining Grid Areas
We can create named areas on the grid to put content into.
No clearing required
Items sit in their own rows on the grid therefore we do not need to clear them as with floats.
Redefining Grid Areas with Media Queries
As our layout is defined in CSS we can redefine the grid using media queries
Source Independence
Placement of items on the grid can be separate to their order in the source
Layering items
Items can be stacked, and the stacking order controlled with z-index
A grid item as a new positioning context
You can absolutely position items inside an area of the Grid.
Grid auto-placement
Grid will position grid items automatically on a grid created on the parent.
Grid auto-flow column
Items are placed in rows by default but you can specify to layout by column.
Grid auto-placement mixed with placed items
You can mix auto-placed items with those you give a position to
The auto-fill keyword in repeating track definitions
When using repeat notation you can use auto-fill rather than an integer to create as many tracks as will fill the container
Nested Grid
A grid item may become a grid container itself.
Implicit named grid lines
When using Named Areas implicit named lines are automatically created.
Using Order
Grid supports the order property also found in Flexbox.
Box alignment align-items
Using the box alignment property align-items
Box alignment justify-items
Using the box alignment property justify-items
Box alignment align-self
Using the box alignment property align-self
Box alignment justify-self
Using the box alignment property justify-self
minmax() in auto-fill repeating tracks
A grid that contains as many 200 pixel column tracks as will fit into the container with the remaining space shared equally between the columns.
minmax() and spanning columns and rows
A grid that contains as many 200 pixel column tracks as will fit into the container with the remaining space shared equally between the columns.
The auto-fill keyword with named grid lines
An auto-fill grid, positioning items using named lines and span.
A simple minmax example
Using minmax() to make the first column stretch after placing all three column tracks
Aligning the Grid
The total size of the tracks is smaller than the size of the grid container.
Aligning the grid with space-around and space-between
Using space-around and space-between may make grid areas and gutters larger than anticipated.
Multiple tracks in a track-list with auto-fill
The repeat syntax can take a track-list rather than a single value.
Multiple tracks in a track-list with auto-fill and minmax()
Using minmax() to create tracks that grow proportionally with multiple track listings.
Percentage based grids and gaps
You can create grids using percentage values for tracks and gaps.
auto-fill vs. auto-fit
An example to demonstrate the difference between the auto-fill and auto-fit keywords in repeat notation
Subgrid on columns and rows
The subgrid value is used for grid-template-columns and grid-template-rows
Subgrid on columns, implicit grid rows
The subgrid value is used for grid-template-columns. The rows are created as an implicit grid.
Subgrid on rows, defined column tracks
The subgrid value is used for grid-template-rows. The columns are created as a normal track listing.
The subgrid can override the gap on the parent
The subgrid inherits the gap of the parent but it can be changed in the subgrid.
No implicit grid in subgridded dimension
Additional items will be forced into the last row of the subgrid
Line names on the parent are passed into the subgrid
If you define line names on the parent, these are passed into the subgrid and can be used to position things.
Line names on the child are added to those from the parent
If you define line names on the parent, these are passed into the subgrid and can be used to position things.
Padding is honored on the subgrid
Subgrids can have their own padding which will be deducted from the first and/or last tracks.
Margin is honored on the subgrid
Subgrids can have their own margin which will be deducted from the first and/or last tracks.
Source: https://gridbyexample.com/examples/
0 Response to "Easy and Simple Css Grid Fr Tutorials"
Post a Comment