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

    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
 
    <title>CSS Only - Switcher Layout</title>
 
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/body.css">
    <link rel='stylesheet prefetch' href='css/bootstrap.css'>
 
	<script>
	  window.console = window.console || function(t) {};
	  window.open = function(){ console.log("window.open is disabled."); };
	  window.print   = function(){ console.log("window.print is disabled."); };
	</script>
 
	<script type="text/javascript" src="js/style.js" ></script>

	<header>
		<h1>CSS Only - Switcher Layout</h1>
	</header>
 
	<input type="radio" id="grid" name="layout" />
	<label for="grid" class="fa fa-th"></label>
	<input type="radio" id="list" name="layout" checked />
	<label for="list" class="fa fa-list"></label>
 
<div class="container">
  <div class="content">
    <div class="card">
      <h2>Sourcecodester</h2>
      <img src="images/1.jpg" alt="" />
      <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>
      <ul>
        <li>Like</li>
        <li>Comment</li>
        <li>Share</li>
        <li>Repost</li>
      </ul>
    </div>
    <div class="card">
      <h2>Programming</h2>
      <img src="images/2.jpg" alt="" />
      <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>
      <ul>
        <li>Like</li>
        <li>Comment</li>
        <li>Share</li>
        <li>Repost</li>
      </ul>
    </div>
    <div class="card">
      <h2>Blog</h2>
      <img src="images/3.jpg" alt="" />
      <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>
      <ul>
        <li>Like</li>
        <li>Comment</li>
        <li>Share</li>
        <li>Repost</li>
      </ul>
    </div>
    <div class="card">
      <h2>Tutorials</h2>
      <img src="images/4.jpg" alt="" />
      <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>
      <ul>
        <li>Like</li>
        <li>Comment</li>
        <li>Share</li>
        <li>Repost</li>
      </ul>
    </div>
    <div class="card">
      <h2>Articles</h2>
      <img src="images/5.jpg" alt="" />
      <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>
      <ul>
        <li>Like</li>
        <li>Comment</li>
        <li>Share</li>
        <li>Repost</li>
      </ul>
    </div>
    <div class="card">
      <h2>Mobile</h2>
      <img src="images/6.jpg" alt="" />
      <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>
      <ul>
        <li>Like</li>
        <li>Comment</li>
        <li>Share</li>
        <li>Repost</li>
      </ul>
    </div>
  </div>
</div>
 
	<script>
	  if (document.location.search.match(/type=embed/gi)) {
		window.parent.postMessage("resize", "*");
	  }
	</script>