CSS3 Template Layout Model

« Previous Tutorial Next Tutorial »

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):

css3 template layout model

Using the template layout model, you can divide the layout of a Web page or a form in following two parts :

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.

An element mapped to its slot in a template by using the position property.

The template itself is specified by using the display property for remapping of some elements.

Let's learn about the display and position properties.

CSS3 display Property

The display property is used to set the layout for the content of elements in the rows and columns format. It provides a template value to an element, which is also called a template element.

The syntax of using the display property is given as follows :

display:inline? [ <string> [ / <row-height> ]? ]+ <col-width>*;

The description of the preceding syntax is given as follows :

The symbols used in a template have the following meaning :

Note - The letters used in a template are case-insensitive

CSS3 display Property Example

Following is an example of using the display property:

div { display:"" ; }

CSS3 position Property

The position property is used to map the element slots with the elements. It specifies the row and column of a template in which an element will be placed.

The syntax to use the position property is given as follows :

position: <letter> | same;

In the preceding syntax, the <letter> parameter can be a single letter or the @ symbol. The <letter> parameter places an element in the specified slot. The value, same, places an element to the same slot where the last element was placed. It means multiple elements can be put int the same slot.

CSS3 position Property Example

Following is an example of using the position property:

<style type="text/css">
   body { height:100%;
         "a   .   b   .   c"   /2em
         ".   .   .   .   ."   /1em
         "d   .   e   .   f"
         ".   .   .   .   ."   /1em
         "g   .   h   .   i"   /2em
         5em 1em  *  1em 10em }
   #logo {position: a}
   #motto {position: b}
   #date {position: c}
   #main {position: e}
   #adv {position: f}
   #copy {position: g}
   #about {position: h}

CSS Online Test

« Previous Tutorial Next Tutorial »

© Copyright 2021. All Rights Reserved.