Teach with us

Building a Responsive Grid-View with CSS

You can try to run the following code to build a responsive grid-view:

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <style>
         * {
            box-sizing: border-box;
         }
         .header {
            border: 1px solid black;
            padding: 10px;
         }
         .leftmenu {
            width: 30%;
            float: left;
            padding: 10px;
            border: 1px solid black;
         }
         .content {
            width: 70%;
            float: left;
            padding: 10px;
            border: 2px dotted black;
         }
      </style>
   </head>
   <body>
      <div class = "header">
         <h1>Header</h1>
      </div>
      <div class = "leftmenu">
         <ul>
            <li>Menu One</li>
            <li>Menu Two</li>
            <li>Menu Three</li>
            <li>Menu Four</li>
            <li>Menu Five</li>
            <li>Menu Six</li>
            <li>Menu Seven</li>
            <li>Menu Eight</li>
            <li>Menu Nine</li>
            <li>Menu Ten</li>
         </ul>
      </div>
      <div class = "content">
         <h1>Demo</h1>
         <p>This is demo text. This is demo text. This is demo text.
            This is demo text. This is demo text. This is demo text.
            This is demo text. This is demo text. This is demo text.
            This is demo text. This is demo text. This is demo text.
            This is demo text. This is demo text. This is demo text.
            This is demo text. This is demo text. This is demo text.
            This is demo text.
         </p>
      </div>
   </body>
</html>
Updated on 25-Jun-2020 06:08:40

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements