CSS Layout

CSS Layout provides many layout choices that permit North American country to manage the position.

The Various Layout are:-

  • Normal Layout
  • CSS show property
  • Flexbox Layout
  • Grid Layout
  • Floats Layout
  1. Traditional Layout
    The Normal layout is that the by default layout during which components area unit displayed on a webpage consistent with their prevalence within the code

Code:-

<html>
<head>
    <title>Example of Layout</title>
</head>
<body>
    <h1>Gurukulzone SRCS</h1>
    <h2> Example of Normal Layout</h2>
<ul>
    <li>Ujjawal Saini</li>
    <li>Ankur Dhama</li>
    <li>Shashank</li>
 </ul>
 </body>
 </html>  

  1. Output:-
  1. CSS show Property
    The CSS show property provides a distinct show choices like inline, flex, grid, inline-block then on. every price that the block property will carry adds a distinct layout on the webpage.

Code:-

<html>
<head>
    <title>Example of Layout</title>
</head>
<body>
    <h1>Gurukulzone SRCS</h1>
    <h2> Example of CSS Display Property</h2>
<ul>
    <li style = "display:inline">Ujjawal Saini</li>
    <li style = "display:inline">Ankur Dhama</li>
    <li style = "display:inline">Shashank</li>
 </ul>
 </body>
 </html>                       

Output:-

  1. Flexbox Layout
    The flexbox layout is employed to form it straightforward for net designers to layout in one direction that’s all parts ar either arranged move into a row or in an exceedingly column. To use the flexbox layout, we are able to set flex worth for the show property.

Code:-

<html>
<head>
    <title>Example of Layout</title>
</head>
<body>
    <h1>Gurukulzone SRCS</h1>
    <h2> Example of flexbox layout</h2>
<ul style="display:flex">
    <li>Ujjawal Saini</li>
    <li>Ankur Dhama</li>
    <li>Shashank</li>
 </ul>
 </body>
 </html>                       

Output:-

  1. Grid Layout
    The CSS grid layout is employed for 2 dimensions that ar, lining parts up into rows and columns. we will use the Grid Layout with a worth of show set to grid.

Code:-

<html>
<head>
    <title>Example of Layout</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .grrid{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 150px 100px;
            grid-gap: 15px;
        }
        .grrid > div{
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <h1>Gurukulzone SRCS</h1>
    <h2> Example of Grid layout</h2>
<div class="grrid">
    <div >One</div>
    <div >Two</div>
    <div >Three</div>
    <div >Four</div>
    <div >Five</div>
    <div >Six</div>
 </body>
 </html>                       

Output:-

  1. Float Layout
    The Float layout worth modifies the behavior of part follows a traditional flow. The component is emotional either to the left or to the proper and is far from the traditional flow.

The CSS Float property has four potential values listed as follows:-

  • Float none— It specifies no floating the least bit and is that the default worth.
  • Float left— it’s accustomed float the component to the left.
  • Float right— it’s accustomed float the component to the proper.
  • Float inherit— It specifies that the worth of the float property ought to be inheritable from the parent parts.

Code:-

<html>
<head>
    <title>Example of Layout</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .f{
            float: left;
            width: 200px;
            height: 200px;
            margin-right: 30px;
            background-color: blue;
        }
        .ff{
            float: right;
            width: 200px;
            height: 200px;
            margin-right: 30px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <h1>Gurukulzone SRCS</h1>
    <h2> Example of float layout</h2>
<div class="f"></div>
   <p>This is the example of float and this tutorial website will help you 
    to learn about the various languages. Lorem ipsum dolor sit amet, 
    consectetur adipisicing elit, sed do eiusmod
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
    <div class="ff"></div>
    <p>This is the example of float and this tutorial website will help you 
    to learn about the various languages. Lorem ipsum dolor sit amet, 
    consectetur adipisicing elit, sed do eiusmod
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
 </body>
 </html>                       

Output:-

Leave a Reply

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