CSS3 Template Layout Model

CSS3 introduces a new layout model, called the template layout model, which allows you to present the content contained in elements into slots.

The slots are the placeholders that can be created by declaring a grid structure using certain alphabetical characters as shown in the following figure (Using Alphabets to Create Slots in a Template):

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .xContainer {display: grid; gap: 4px; 
         grid-template-areas: 'head head head head head' 'nav con con con oth' 'foot foot foot foot foot';}
      .xContainer > div {background-color: black; color: white; padding: 10px; text-align: center;}
      #xHeader {grid-area: head;}
      #xMenu {grid-area: nav; min-height: 300px;}
      #xContent {grid-area: con; min-height: 300px;}
      #xOther {grid-area: oth; min-height: 300px;}
      #xFooter {grid-area: foot;}
   </style>
</head>
<body>

   <div class="xContainer">
      <div id="xHeader">Header</div>
      <div id="xMenu">Menu</div>
      <div id="xContent">Content</div>
      <div id="xOther">Other</div>
      <div id="xFooter">Footer</div>
   </div>
   
</body>
</html>

Output

Header

Content

Other

Footer

Note - The display property defines, how an element should rendered on the web page. The display: grid declaration converts the element into a grid container.

Note - The grid-template-areas property defines the area of a/multiple grid item(s) in grid layout.

Note - The grid-area property defines the location and size of a grid item in grid layout.

The template layout model defines a layout policy, called template-based positioning, to give an invisible grid to an element for aligning with other elements.

A template does not allow elements to overlap and provides layouts with different widths, heights, and alignments.

CSS Online Test

« Previous Tutorial Next Tutorial »