Usage

Grid view JS utilizes Bootstrap's grid system and bootstrap's cards so you will need to include Bootstrap in your page's <head> tag

Grid view JS also requires the jQuery library, so make sure to include jQuery before including Grid view JS 

<!--Jquery-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<!--Grid View JS-->
<script src="https://cdn.jsdelivr.net/gh/AdvaithM26/Grid-View-JS@master/main/grid-view.js" crossorigin="anonymous"></script>

Sample template

Here is a template to get your started with Grid view JS:

Try it

Click the grid buttons on the top right to see Grid view JS in action! 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"
		/>
		<link
			href="https://fonts.googleapis.com/icon?family=Material+Icons"
			rel="stylesheet"
		/>
		<title>Try Grid view JS</title>
	</head>
	<body>
		<div class="container">
			<div class="container text-right mt-3">
				<a type="button" class="no-outline p-0 grid-3x3" title="Spaced">
					<span class="material-icons">
						apps
					</span>
				</a>

				<a
					type="button"
					class="no-outline p-0 mx-2 grid-4x3"
					title="Compact"
				>
					<span class="material-icons">
						view_comfy
					</span>
				</a>
			</div>
			<div class="row">
				<div class="gv-card col-4 my-4">
					<div class="card">
						<img
							class="card-img-top project-image"
							src="pics/misc/placeholder-image.png"
							alt="Some alternate text"
						/>
						<div class="card-body">
							<h3 class="card-title">Some title</h3>
							<p class="card-text">Some sample text</p>
							<a href="#" class="btn btn-primary">Button</a>
						</div>
					</div>
				</div>
				<div class="gv-card col-4 my-4">
					<div class="card">
						<img
							class="card-img-top project-image"
							src="pics/misc/placeholder-image.png"
							alt="Some alternate text"
						/>
						<div class="card-body">
							<h3 class="card-title">Some title</h3>
							<p class="card-text">Some sample text</p>
							<a href="#" class="btn btn-primary">Button</a>
						</div>
					</div>
				</div>
				<div class="gv-card col-4 my-4">
					<div class="card">
						<img
							class="card-img-top project-image"
							src="pics/misc/placeholder-image.png"
							alt="Some alternate text"
						/>
						<div class="card-body">
							<h3 class="card-title">Some title</h3>
							<p class="card-text">Some sample text</p>
							<a href="#" class="btn btn-primary">Button</a>
						</div>
					</div>
				</div>
				<div class="gv-card col-4 my-4">
					<div class="card">
						<img
							class="card-img-top project-image"
							src="pics/misc/placeholder-image.png"
							alt="Some alternate text"
						/>
						<div class="card-body">
							<h3 class="card-title">Some title</h3>
							<p class="card-text">Some sample text</p>
							<a href="#" class="btn btn-primary">Button</a>
						</div>
					</div>
				</div>
				<div class="gv-card col-4 my-4">
					<div class="card">
						<img
							class="card-img-top project-image"
							src="pics/misc/placeholder-image.png"
							alt="Some alternate text"
						/>
						<div class="card-body">
							<h3 class="card-title">Some title</h3>
							<p class="card-text">Some sample text</p>
							<a href="#" class="btn btn-primary">Button</a>
						</div>
					</div>
				</div>
				<div class="gv-card col-4 my-4">
					<div class="card">
						<img
							class="card-img-top project-image"
							src="pics/misc/placeholder-image.png"
							alt="Some alternate text"
						/>
						<div class="card-body">
							<h3 class="card-title">Some title</h3>
							<p class="card-text">Some sample text</p>
							<a href="#" class="btn btn-primary">Button</a>
						</div>
					</div>
				</div>
				<div class="gv-card col-4 my-4">
					<div class="card">
						<img
							class="card-img-top project-image"
							src="pics/misc/placeholder-image.png"
							alt="Some alternate text"
						/>
						<div class="card-body">
							<h3 class="card-title">Some title</h3>
							<p class="card-text">Some sample text</p>
							<a href="#" class="btn btn-primary">Button</a>
						</div>
					</div>
				</div>
				<div class="gv-card col-4 my-4">
					<div class="card">
						<img
							class="card-img-top project-image"
							src="pics/misc/placeholder-image.png"
							alt="Some alternate text"
						/>
						<div class="card-body">
							<h3 class="card-title">Some title</h3>
							<p class="card-text">Some sample text</p>
							<a href="#" class="btn btn-primary">Button</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--Scripts needed to run bootstrap-->
		<script
			src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
			integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
			crossorigin="anonymous"
		></script>
		<script
			src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
			integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
			crossorigin="anonymous"
		></script>
		<script
			src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
			integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
			crossorigin="anonymous"
		></script>
		<!--Grid View JS-->
		<script
			src="https://cdn.jsdelivr.net/npm/grid-view-js@1.4.0/main/grid-view.js"
			crossorigin="anonymous"
		></script>
	</body>
</html>

Required classes

To use Grid View JS, some elements must have certain classes

  • All cards must have the class .gv-card
  • All cards must also have a default Bootstrap grid class. See allowed grid classes
  • The button that triggers the compact (4x3) view must have the class .grid-4x3
  • The button that triggers the spaced (3x3) view must have the class .grid-3x3

Allowed grid classes

These classes are the only ones that are able to work with Grid view JS at this time

  • .col-3 or .col-4
  • .col-sm-3 or .col-sm-4
  • .col-md-3 or .col-md-4
  • .col-lg-3 or .col-lg-4
  • .col-xl-3 or .col-xl-4