CSS Grid Layout Module

CSS Grid Layout

Bootstrap List Grid View

Bootstrap List Grid View HTML

<div class="container">
<div class="well well-sm">
<strong>Display</strong>
<div class="btn-group">
<a href="#" id="list" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th-list">
</span>List</a> <a href="#" id="grid" class="btn btn-default btn-sm"><span
class="glyphicon glyphicon-th"></span>Grid</a>
</div>
</div>
<div id="products" class="row list-group">
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Product title</h4>
<p class="group inner list-group-item-text">
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
$21.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Product title</h4>
<p class="group inner list-group-item-text">
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
$21.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Product title</h4>
<p class="group inner list-group-item-text">
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
$21.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Product title</h4>
<p class="group inner list-group-item-text">
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
$21.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Product title</h4>
<p class="group inner list-group-item-text">
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
$21.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Product title</h4>
<p class="group inner list-group-item-text">
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
$21.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Bootstrap List Grid View CSS

.glyphicon { margin-right:5px; }
.thumbnail
{
margin-bottom: 20px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.item.list-group-item
{
float: none;
width: 100%;
background-color: #fff;
margin-bottom: 10px;
}
.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover
{
background: #428bca;
}
.item.list-group-item .list-group-image
{
margin-right: 10px;
}
.item.list-group-item .thumbnail
{
margin-bottom: 0px;
}
.item.list-group-item .caption
{
padding: 9px 9px 0px 9px;
}
.item.list-group-item:nth-of-type(odd)
{
background: #eeeeee;
}
.item.list-group-item:before, .item.list-group-item:after
{
display: table;
content: " ";
}
.item.list-group-item img
{
float: left;
}
.item.list-group-item:after
{
clear: both;
}
.list-group-item-text
{
margin: 0 0 11px;
}

Bootstrap List Grid View JAVASCRIPT

$(document).ready(function() {
$('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');});
$('#grid').click(function(event){event.preventDefault();$('#products .item').removeClass('list-group-item');$('#products .item').addClass('grid-group-item');});
});

CSS Grid Layout - Basic Grid

CSS Grid Layout Basic Grid HTML

CSS Grid Layout Basic Grid CSS

.container {
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
grid-gap: 1rem;
}

CSS Grid Layout - Template Areas

CSS Grid Layout - Template HTML

<div class="container">
<div class="item header">header</div>
<div class="item sidebar">sidebar</div>
<div class="item content-1">Content-1</div>
<div class="item content-2">Content-2</div>
<div class="item content-3">Content-3</div>
<div class="item footer">footer</div>
</div>

CSS Grid Layout - Template CSS

.container {
display: grid;
width: 750px;
height: 600px;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 80px 1fr 1fr 100px;
grid-gap: 1rem;
grid-template-areas:
"header header header"
"sidebar content-1 content-1"
"sidebar content-2 content-3"
"footer footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content-1 {
grid-area: content-1;
}
.content-2 {
grid-area: content-2;
}
.content-3 {
grid-area: content-3;
}
.footer {
grid-area: footer;
grid-row: 4 / 5;
grid-column: 1 / 4;
}

/* OTHER STYLES */
body {
background-color: #3b404e;
display: flex;
justify-content: center;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.item {
background-color: #1EAAFC;
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
color: #ffffff;
border-radius: 4px;
border: 6px solid #171717;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: bold;
}
.header {
background-color: #1EAAFC;
background-image: linear-gradient(160deg, #6C52D9 0%, #9B8AE6 127%);
}
.sidebar {
background-image: linear-gradient(203deg, #3EDFD7 0%, #29A49D 90%)
}
.content-1,
.content-2,
.content-3 {
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
}
.footer {
background-color: #6C52D9;
background-image: linear-gradient(160deg, #6C52D9 0%, #9B8AE6 127%);
}

Image Gallery with CSS Grid layout and Flexbox Fallback

Image Gallery with CSS Grid & Flexbox Fallback

Image Gallery with CSS Grid and Flexbox HTML

<div class="container">
<h1 class="heading">Image Gallery with CSS Grid <span>& Flexbox Fallback</span></h1>
<div class="gallery">
<div class="gallery-item">
<img class="gallery-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-fff2lftqIE077pFAKU1Mhbcj8YFvBbMvpA&usqp=CAU" alt="person writing in a notebook beside by an iPad, laptop, printed photos, spectacles, and a cup of coffee on a saucer">
</div>
<div class="gallery-item">
<img class="gallery-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-fff2lftqIE077pFAKU1Mhbcj8YFvBbMvpA&usqp=CAU" alt="sunset behind San Francisco city skyline">
</div>
<div class="gallery-item">
<img class="gallery-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-fff2lftqIE077pFAKU1Mhbcj8YFvBbMvpA&usqp=CAU" alt="people holding umbrellas on a busy street at night lit by street lights and illuminated signs in Tokyo, Japan">
</div>
<div class="gallery-item">
<img class="gallery-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-fff2lftqIE077pFAKU1Mhbcj8YFvBbMvpA&usqp=CAU" alt="car interior from central back seat position showing driver and blurred view through windscreen of a busy road at night">
</div>
<div class="gallery-item">
<img class="gallery-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-fff2lftqIE077pFAKU1Mhbcj8YFvBbMvpA&usqp=CAU" alt="back view of woman wearing a backpack and beanie waiting to cross the road on a busy street at night in New York City, USA">
</div>
<div class="gallery-item">
<img class="gallery-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-fff2lftqIE077pFAKU1Mhbcj8YFvBbMvpA&usqp=CAU" alt="man wearing a black jacket, white shirt, blue jeans, and brown boots, playing a white electric guitar while sitting on an amp">
</div>
</div>
</div>

Image Gallery with CSS Grid and Flexbox CSS

/*
All grid code is placed in a 'supports' rule (feature query) at the bottom of the CSS (Line 77).

The 'supports' rule will only run if your browser supports CSS grid.
Flexbox is used as a fallback so that browsers which don't support grid will still recieve an identical layout.
*/
@import url(https://fonts.googleapis.com/css?family=Montserrat:500);
:root {
/* Base font size */
font-size: 10px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: #fafafa;
}
.container {
max-width: 100rem;
margin: 0 auto;
padding: 0 2rem 2rem;
}
.heading {
font-family: "Montserrat", Arial, sans-serif;
font-size: 4rem;
font-weight: 500;
line-height: 1.5;
text-align: center;
padding: 3.5rem 0;
color: #1a1a1a;
}
.heading span {
display: block;
}
.gallery {
display: flex;
flex-wrap: wrap;
/* Compensate for excess margin on outer gallery flex items */
margin: -1rem -1rem;
}
.gallery-item {
/* Minimum width of 24rem and grow to fit available space */
flex: 1 0 24rem;
/* Margin value should be half of grid-gap value as margins on flex items don't collapse */
margin: 1rem;
box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.gallery-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 400ms ease-out;
}
.gallery-image:hover {
transform: scale(1.15);
}
/*
The following rule will only run if your browser supports CSS grid.
Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling.
*/
@supports (display: grid) {
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
grid-gap: 2rem;
}
.gallery,
.gallery-item {
margin: 0;
}
}

Website Design99