CSS Layouts || CSS Grid Layout

CSS

CSS Layouts are the techniques to position the html elements in the web page.It make easily for user to read and explore the web page.

Types:

  • Normal Flow
  • Display property
  • Position property
  • Flexbox
  • Grid
  • Float

Normal Flow:

The Normal flow is the default layout of the web page. The html elements that are written one below another are block.

Example #1:

<p>The menu of tonight dinner is following</p>
<ol>
    <li>Chinese Rice</li>
    <li>Burgur</li>
    <li>Pizza</li>
</ol>

Output:

The menu of tonight dinner is following

  • Chinese Rice
  • Burgur
  • Pizza

Display Property:

The css display property align the html element in three different manner:

Block:

Block takes the whole width of web page by default.Its width can be handle by using width property.

display:block;

Inline:

All Html elements align in line using this value for display property.

display:inline;

Inline-block:

It sets the html elements to block and than align them all in line. Below Image will explain well.

display:inline-block;

Position Property:

Relative Position:

The relative position will position the html element relative to its position in normal flow.

Example #2:

 <style>
    .relative {
        position: relative;
        top: 10px;
        left: 20px;
    }
</style>
</head>

<body>
    <p>block number 1 with normal flow </p>
    <p class="relative">The block specifically relative positioning</p>
    <p> block number 2 with normal flow</p>
</body>

Output:

  block number 1 with normal flow

The block specifically relative positioning

block number 2 with normal flow

Absolute Position:

The Absolute position generally position the html element out of the normal flow,position itself from the starting of web page

Example #3:

<style>
.absolute{
    position: absolute;
    top:10px;
    left:20px;
}

</style>
</head>
<body>
 <p>block number 1 with normal flow </p>
    <p class="absolute">The block specifically absolute positioning</p>
    <p> block number 2 with normal flow</p> 
</body>

Output:

Flexbox Layout:

Flexbox stands for Flexible Box Layout Module. It use specifically to align the html elements in row or column manner. Generally flexbox direction is row.

Example #4

 <head>
    <style>
        .flex {
            display: flex;
            flex-direction: column;
        }
    </style>
</head>

<body>
    <div class="flex">
        <div>A</div>
        <div>B</div>
        <div>C</div>
    </div>
</body>

Output:

A
B
C

Grid Layout:

Grid Layout is introduce specifically for two-dimensional representation of web page in CSS Layouts .In addition, grid-template-columns and grid-template-rows both are use to define number of columns and number of rows respectively with their width.

Example #5:

 style>
        .grid {
            display: grid;
            grid-gap: 20px;
            grid-template-columns:100px 100px 50px;
            grid-template-rows:20px 20px; 
        }
    </style> 
 <div class="grid">
        <div>Rice</div>
        <div>Beans</div>
        <div>Burger</div>
        <div>Vegetable</div>
        <div>Fruits</div>
        <div>Cake</div> 
    </div>

Output:

Rice
Beans
Burger
Vegetable
Fruits
Cake

Float:

Float use to define the behavior of html elements under the normal flow. of CSS Layouts. Thus,behavior can be changed in four possible manner,like left , right , inherit, none.

Example #6:

  <style>
        .float {
            float: left;
            padding: 50px;
            border:1px solid;
        }
    </style>
    <div class="float">
        Image
    </div>
    <p>
        In fact we used to go their but due to the weather condition and weekend , we rejected the plain!.
    </p>

Output:

Image

In fact we used to go their but due to the weather condition and weekend , we rejected the plain!.

 

For more Examples Related CSS,html and Java Script Visit on Coding Academics

For Web,Java and Assembly language related Semester Projects please Visit on Programming Zone.  

Leave a Reply

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