CSS

CSS Layouts || CSS Grid Layout

Css Layouts

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 *