Grid Layout

Developer
Tim Ivey
Size
3,154 Kb
Views
20,240
  1. Grid Layout Previews
  2. Grid Layout HTML Codes
  3. Grid Layout CSS Codes

How do I make an grid layout?

What is a grid layout? How do you make a grid layout? This script and codes were developed by Tim Ivey on 12 December 2022, Monday.

Grid Layout Previews
IQ Test

Grid Layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Grid Layout</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="area__header"> <div class="area__header--menu"><i class="fa fa-bars" aria-hidden="true"></i></div> <h1 class="area__header--branding">Grid Layout</h1>
</div>
<div class="area__main"> <div class="capsule capsule__registration"> <h2 class="registration__header">Join</h2> <form> <input type="text" placeholder="Name"> <input type="text" placeholder="Email"> <input type="button" value="Create Account"> </form> </div> <div class="capsule capsule--green capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--navy capsule--large"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day... Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--salmon capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--brown capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--gold capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--brown capsule--large"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--navy capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--salmon capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--green capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--gold capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--brown capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--navy capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--salmon capsule--large"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--green capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--gold capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--brown capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--navy capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--salmon capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--green capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--gold capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--brown capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--navy capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--salmon capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--green capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--gold capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--brown capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--navy capsule--large"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--salmon capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--green capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--gold capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--brown capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--navy capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--salmon capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule__registration"> <h2 class="registration__header">Join</h2> <form> <input type="text" placeholder="Name"> <input type="text" placeholder="Email"> <input type="button" value="Create Account"> </form> </div> <div class="capsule capsule--green capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--gold capsule--large"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--brown capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--navy capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--salmon capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--green capsule--large"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--gold capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--brown capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--navy capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--salmon capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--green capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--gold capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--brown capsule--large"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--navy capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--salmon capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--green capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--gold capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--brown capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--navy capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--salmon capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--green capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--gold capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--brown capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--navy capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--salmon capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--green capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--gold capsule--large"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--brown capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--navy capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--salmon capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--green capsule--medium"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--gold capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div> <div class="capsule capsule--brown capsule--small"> <img class="capsule__img--opaque" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="capsule__text">Today is a good day...</div> <div class="capsule__meta-container"> <img class="meta-container__img" src="https://preview.ibb.co/hn78i5/wormtim.jpg"> <div class="meta-container__timer">Timer</div> </div> </div>
</div>
<div class="area__footer">Footer</div>
</body>
</html>

Grid Layout - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Raleway|Roboto');
html, body { min-height: 100vh; margin: 0; padding: 0;
}
body { font-family: Raleway;
}
h1, h2, h3, h4, h5 { font-family: Roboto; padding: 0; margin: 0;
}
h1, h2, h3, h4, h5,
p, ul, li, img { margin: 0; paedding: 0;
}
input[type=text] { width: 100%; border-radius: 4px; border: none; padding: .5em; box-sizing: border-box; margin-bottom: 1em; background: #eee;
}
/* Grid Layout specific */
body { display: grid; grid-template-rows: 46px auto 100px; grid-template-areas: "header" "main" "footer"; align-self: center;
}
.area__header { grid-area: header; background-color: #466671; color: #fff; padding: .5em 1em; border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.area__header--menu { display: inline-block; font-size: 26px; font-weight: normal; margin-right: .5em;
}
.area__header--branding { font-weight: normal; display: inline-block; font-size: 26px
}
.area__main { grid-area: main; display: grid; grid-template-columns: repeat(18, 1fr); grid-auto-flow: dense; background-color: #7094a0;
}
.area__footer { grid-area: footer; background-color: #000;
}
.capsule { color: #fff; font-size: smaller; border: 1px solid rgba(255, 255, 255, .3); transition: all 1s ease-in-out; position: relative;
}
.capsule:hover { transform: scale(1.1); z-index: 1;
}
.capsule--navy { background-color: #466671;
}
.capsule--salmon { background-color: #cd5a3f;
}
.capsule--green { background-color: #93a478;
}
.capsule--brown { background-color: #60321b;
}
.capsule--gold { background-color: #de9b55;
}
.capsule__img--opaque { width: 100%; display: block; opacity: 0.2; margin-bottom: 1.5em;
}
.capsule__text { bottom: 0; overflow: hidden; position: absolute; height: 1.7em; font-size: .75em; padding: 0 .5em; white-space: nowrap; width: 90%; text-align: center;
}
.capsule__meta-container { position: absolute; height: 100%; width: 100%; top: 0; opacity: 0; transition: all 1s ease-in-out;
}
.capsule__meta-container:hover { opacity: 1;
}
.meta-container__img { width: 100%; opacity: .7;
}
.meta-container__timer { position: absolute; top: 1em; right: 0; background-color: rgba(0, 0, 0, 0.7); padding: .1em 1em;
}
.capsule--large { grid-row-end: span 3; grid-column-end: span 3; font-size: larger;
}
.capsule--medium { grid-row-end: span 2; grid-column-end: span 2; font-size: normal;
}
.capsule--small { grid-row-end: span 1; grid-column-end: span 1; font-size: 7px;
}
.capsule__registration { grid-row-start: 3; grid-row-end: span 4; grid-column-start: 10; grid-column-end: span 4; background-color: #eed0ae; color: #666; padding: 2em; border: 2px solid white;
}
.registration__header { margin-bottom: 1em;
}
@media only screen and (max-width : 1000px) { .area__main { grid-template-columns: repeat(12, 1fr); } .capsule__registration { grid-row-start: 2; grid-row-end: span 4; grid-column-start: 6; grid-column-end: span 4; }
}
Grid Layout - Script Codes
Grid Layout - Script Codes
Home Page Home
Developer Tim Ivey
Username timivey
Uploaded December 12, 2022
Rating 3
Size 3,154 Kb
Views 20,240
Do you need developer help for Grid Layout?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim Ivey (timivey) Script Codes
Name
JavaScript Objects
Array filter
Elementary JavaScript quiz form
Simple JQuery Content Slider
Sample json
Load JSON via Codepen
AngularJS Dependency Injection
Recursion
JS Scope
JQuery YouTube Search Engine
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!