Grid areas

Grid areas are a feature of CSS Grid Layout that allow you to group together multiple cells of a grid and assign them a name. To define a grid area, you can use the grid-template-areas property, which allows you to create named grid areas by grouping together cells of the grid using quotation marks.

.parent {
  display: grid;
    ". logo ."
    "header header header"
    "main main sidebar-top"
    "main main sidebar-bottom"
    "aside aside sidebar-bottom"
    "footer footer footer";
.grid-logo {
  grid-area: logo;

See the Pen flex-box by majadc (@majadc) on CodePen.



Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.