{"id":136986,"date":"2024-10-11T12:55:50","date_gmt":"2024-10-11T07:25:50","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=136986"},"modified":"2024-10-16T13:08:17","modified_gmt":"2024-10-16T07:38:17","slug":"named-grid-lines-and-grid-template-areas-layout-with-css-grid","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/named-grid-lines-and-grid-template-areas-layout-with-css-grid\/","title":{"rendered":"Named grid lines and grid-template-areas | Layout with CSS Grid"},"content":{"rendered":"\n

Named grid lines provide a more readable and maintainable way to define the layout of your grid. Instead of using line numbers, you can assign names to specific grid lines and use these names to place items within the grid.<\/p>\n\n\n\n

Example:<\/strong><\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

.container {<\/p>\n\n\n\n

  display: grid;<\/p>\n\n\n\n

  grid-template-columns: [header-start] 1fr 1fr [header-end]\n\n\n\n

                           [main-start] 1fr [main-end]\n\n\n\n

                           [sidebar-start] 1fr [sidebar-end];<\/p>\n\n\n\n

  grid-template-rows: 100px 1fr;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

In this example, we’ve defined named grid lines for the header and sidebar sections. We can then use these names to place items within the grid:<\/p>\n\n\n\n

HTML<\/p>\n\n\n\n

<div class=”container”><\/p>\n\n\n\n

  <div class=”header” style=”grid-area: header;”><\/div><\/p>\n\n\n\n

  <div class=”main” style=”grid-area: main;”><\/div><\/p>\n\n\n\n

  <div class=”sidebar” style=”grid-area: sidebar;”><\/div><\/p>\n\n\n\n

<\/div><\/p>\n\n\n\n

Grid-Template-Areas<\/strong><\/p>\n\n\n\n

The grid-template-areas property allows you to define named grid areas and place items within them using a grid template. This can be helpful for creating complex layouts that require precise control over item placement.<\/p>\n\n\n\n

Example:<\/strong><\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

.container {<\/p>\n\n\n\n

  display: grid;<\/p>\n\n\n\n

  grid-template-columns: 1fr 1fr 1fr;<\/p>\n\n\n\n

  grid-template-rows: 100px 1fr;<\/p>\n\n\n\n

  grid-template-areas:<\/p>\n\n\n\n

    “header header header”<\/p>\n\n\n\n

    “main main sidebar”;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

In this example, we’ve defined three grid areas: header, main, and sidebar. We can then use these names to place items within the grid:<\/p>\n\n\n\n

HTML<\/p>\n\n\n\n

<div class=”container”><\/p>\n\n\n\n

  <div class=”header” style=”grid-area: header;”><\/div><\/p>\n\n\n\n

  <div class=”main” style=”grid-area: main;”><\/div><\/p>\n\n\n\n

  <div class=”sidebar” style=”grid-area: sidebar;”><\/div><\/p>\n\n\n\n

<\/div><\/p>\n\n\n\n

Benefits of Using Named Grid Lines and Grid-Template-Areas<\/strong><\/p>\n\n\n\n