How To Make Grid and List View Option Using HTML/CSS

Submitted by alpha_luna on Thursday, July 2, 2015 - 22:38.

Good Day!!!

In this tutorial, we are going to learn How To Make Grid and List View Option. In this project, you can manage your content easily by viewing optionally. We have two types to view our content. We have Grid and List View in this project. For the ListView, it is item-by-item of records of names, things and others in our content or in the linearly ordered data structure. For the GridView, is a versatile control used to accept and display on a web page. Displaying in a horizontal and vertical position. If you have a certain site or a project that have a Gallery menu, you can use it, to maximize the user the way they view your site or project in the Gallery menu.

How To Do This?

Directions:
First: You have to copy this short codes in to the section of your HEAD tag of your page.
  1.     <meta charset="UTF-8">
  2.     <meta name="google" value="notranslate">
  3.        
  4.     <title>CSS Only - Switcher Layout</title>
  5.        
  6.     <link rel="stylesheet" href="css/normalize.css">
  7.     <link rel="stylesheet" href="css/body.css">
  8.     <link rel='stylesheet prefetch' href='css/bootstrap.css'>
  9.  
  10.         <script>
  11.           window.console = window.console || function(t) {};
  12.           window.open = function(){ console.log("window.open is disabled."); };
  13.           window.print   = function(){ console.log("window.print is disabled."); };
  14.         </script>
  15.  
  16.         <script type="text/javascript" src="js/style.js" ></script>
*After this step, kindly Download the source code for the external files needed in the code above. (Just click the "Download Code" below) Second: Kindly copy this code to the BODY tag of your page.
  1.         <header>
  2.                 <h1>CSS Only - Switcher Layout</h1>
  3.         </header>
  4.        
  5.         <input type="radio" id="grid" name="layout" />
  6.         <label for="grid" class="fa fa-th"></label>
  7.         <input type="radio" id="list" name="layout" checked />
  8.         <label for="list" class="fa fa-list"></label>
  9.        
  10. <div class="container">
  11.   <div class="content">
  12.     <div class="card">
  13.       <h2>Sourcecodester</h2>
  14.       <img src="images/1.jpg" alt="" />
  15.       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis eos blanditiis odit sit, neque excepturi, fugiat officiis magni! Ducimus deserunt culpa debitis obcaecati, cumque non a fugiat. Consectetur, itaque, praesentium.</p>
  16.       <ul>
  17.         <li>Like</li>
  18.         <li>Comment</li>
  19.         <li>Share</li>
  20.         <li>Repost</li>
  21.       </ul>
  22.     </div>
  23.     <div class="card">
  24.       <h2>Programming</h2>
  25.       <img src="images/2.jpg" alt="" />
  26.       <p>Eligendi accusamus rerum perspiciatis, officia dolor quos deleniti pariatur voluptate repellendus quibusdam quae tempora possimus? Debitis sed alias, provident voluptatem in eligendi illo culpa, vitae ea eum porro exercitationem expedita!</p>
  27.       <ul>
  28.         <li>Like</li>
  29.         <li>Comment</li>
  30.         <li>Share</li>
  31.         <li>Repost</li>
  32.       </ul>
  33.     </div>
  34.     <div class="card">
  35.       <h2>Blog</h2>
  36.       <img src="images/3.jpg" alt="" />
  37.       <p>Dolore enim, officiis architecto in suscipit magnam eius nesciunt odit inventore quis cum nihil ipsa eligendi laudantium porro tempora rem aut similique voluptate error! Facere distinctio consequatur inventore quod at!</p>
  38.       <ul>
  39.         <li>Like</li>
  40.         <li>Comment</li>
  41.         <li>Share</li>
  42.         <li>Repost</li>
  43.       </ul>
  44.     </div>
  45.     <div class="card">
  46.       <h2>Tutorials</h2>
  47.       <img src="images/4.jpg" alt="" />
  48.       <p>Necessitatibus distinctio facilis a optio, natus numquam nisi harum laudantium modi odit dolore nobis fuga laborum molestiae aperiam itaque impedit et, quisquam ea. Voluptate officiis aliquid, porro nesciunt quasi praesentium!</p>
  49.       <ul>
  50.         <li>Like</li>
  51.         <li>Comment</li>
  52.         <li>Share</li>
  53.         <li>Repost</li>
  54.       </ul>
  55.     </div>
  56.     <div class="card">
  57.       <h2>Articles</h2>
  58.       <img src="images/5.jpg" alt="" />
  59.       <p>Nostrum sapiente quisquam repellendus tenetur consectetur, maiores accusantium hic aperiam dolorem quas dolor veritatis possimus repellat, adipisci aspernatur neque in, dicta nemo quibusdam voluptas cum officia asperiores. Optio unde, tenetur!</p>
  60.       <ul>
  61.         <li>Like</li>
  62.         <li>Comment</li>
  63.         <li>Share</li>
  64.         <li>Repost</li>
  65.       </ul>
  66.     </div>
  67.     <div class="card">
  68.       <h2>Mobile</h2>
  69.       <img src="images/6.jpg" alt="" />
  70.       <p>Tenetur, suscipit! Eum eveniet eos officia exercitationem placeat corporis esse perferendis veniam officiis quibusdam blanditiis modi ullam enim tempore saepe earum dolores repellendus explicabo nulla facilis eaque, unde delectus facere.</p>
  71.       <ul>
  72.         <li>Like</li>
  73.         <li>Comment</li>
  74.         <li>Share</li>
  75.         <li>Repost</li>
  76.       </ul>
  77.     </div>
  78.   </div>
  79. </div>
  80.  
  81.         <script>
  82.           if (document.location.search.match(/type=embed/gi)) {
  83.                 window.parent.postMessage("resize", "*");
  84.           }
  85.         </script>
This is the result of this work: For the List View list_view For the Grid View grid_view So what can you say about this work? Share your thoughts in the comment section below and also, don’t forget to like this page. Thank you.
Tags
css
Layout
gridview
Listview

Add new comment

About text formats
  • 98 views