Inline-block grid

Developer
Dave
Size
3,996 Kb
Views
20,240
  1. Inline-block grid Previews
  2. Inline-block grid HTML Codes
  3. Inline-block grid CSS Codes

How do I make an inline-block grid?

Simple, responsive, SCSS based inline-block grid.This is a demo showing how the inline block grid works. The source code for the actual SCSS grid it's linked to is available on GitHub. What is a inline-block grid? How do you make a inline-block grid? This script and codes were developed by Dave on 17 September 2022, Saturday.

Inline-block grid Previews
IQ Test

Inline-block grid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Inline-block grid</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/https___raw_githubusercon.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Glory Grid</h1>
<section> <div class="a-cell"> <p>Uno</p> </div> <div class="couple-of-cells"> <p>Cheeky 2's</p> </div> <div class="couple-of-cells"> <p>2 Up</p> </div> <div class="half-way-house"> <p>Fifty Scents</p> </div> <div class="a-cell"> <p>Alone</p> </div> <div> <p>Standard</p> </div> <div class="five-o"> <p>Policia!</p> </div> <div class="threes-a-crowd"> <p>Menage-a-trois</p> </div> <div class="all-the-way-home"> <p>Home run Jack!</p> </div>
</section>
</body>
</html>

Inline-block grid - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { font-family: sans-serif;
}
// defaults
h1 { padding: 10px 0; font-size: 2rem;
}
p { background: #8e44ad; padding: 8px; border-radius: 2px;
}
// Grid base
section { @extend %grid; // try %grid--narrow, %grid--wide, %grid--rev, and %grid--full for different effects
}
div { @extend %grid__item; @include cells(4); color: #FFF; padding-bottom: 24px;
}
// Cells (class names can be whatever you want)
.a-cell { @include cells(1);
}
.couple-of-cells { @include cells(2);
}
.threes-a-crowd { @include cells(3);
}
.five-o { @include cells(5);
}
.half-way-house { @include cells(6);
}
// can do classes all the way up to 12
.all-the-way-home { @include cells(12);
}
// Responsive demo, all cells full width at 800px
@media all and (max-width: 800px) { div, .a-cell, .couple-of-cells, .half-way-house, .threes-a-crowd, .five-o { @include cells(12); }
}
Inline-block grid - Script Codes
Inline-block grid - Script Codes
Home Page Home
Developer Dave
Username DaveOrDead
Uploaded September 17, 2022
Rating 3
Size 3,996 Kb
Views 20,240
Do you need developer help for Inline-block grid?

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!

Dave (DaveOrDead) Script Codes
Name
React Tic Tac Toe
React Calculator
Toggle component
Flexbox grid mark 2
Dice roller
React dropdown
Shell CSS lib
Flexbox Grid
Table drag
Blank slates
Create amazing captions 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!