I’ve encountered this design pattern countless times, whether for a grid of logos, articles, or staff profiles. I built a custom solution tailored to the specific use case each time. Recently, I needed to tackle this problem twice in just a few weeks, which led me to polish the code I’d been using and package it as a reusable JavaScript library, now publicly available.
The grid-line-dividers library is designed to work with most standard grid layouts. It simplifies adding clean, responsive dividers to your grid elements.
Download
Include the files
Place the CSS and JavaScript files in your project and include them in the <head> section of your HTML:
<link rel="stylesheet" href="path-to-library/build/grid-lines.min.css">
<script src="path-to-library/build/grid-lines.min.js"></script>Initialize the Script
In your JavaScript, initialize the library for the grid you want to enhance:
// With default options (uses .gl-container)
const gridLines = new GridLines();
// With custom options
const gridLines = new GridLines({
containerSelector: '.my-container',
removeLastItemDivider: true
});CDN Options
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/philhoyt/grid-line-dividers@main/build/grid-lines.min.css">
<script src="https://cdn.jsdelivr.net/gh/philhoyt/grid-line-dividers@main/build/grid-lines.min.js"></script>Customization
:root {
--gl-line-width: 2px; /* Change line width */
--gl-line-color: #cccccc; /* Change line color */
}
.my-container {
--gl-line-width: 3px;
--gl-line-color: red;
}For more information, visit the GitHub repository.
Leave a Reply