grid-system
Advanced tools
This repository contains a small grid system for easy application development. It supports 24 columns as well as `RTL` and `LTR` layouts.
This repository contains a small grid system for easy application
development. It supports 24 columns as well as RTL and LTR
layouts.
Browsers that support media queries should be supported.
Currently any grid system I could find made assumptions about the layout and the style of the code. They assume some kind of padding or margin must take place for the grid. When padding is forced on the grid it causes styles to conflict and alignment to be off when grids become nested.
This library aims to only supply a grid system. If you want a specific padding width, then add that style. If you want a specific margin width this library will not support it easily.
By default most grid systems use 12 columns. I've found that the 12 column width is often not enough. So to get the best of the math that 12 provides and a bit more space, this system defaults to 24 columns.
A grid system should:
If a consumer wishes to have default padding or margin think about applying this padding or margin to the components on the site. Try to avoid putting styles into your grid system. It conflates layout and styling which causes many headaches later in CSS development.
Code can be found in the css build/grid.css file.
<html dir="ltr">
<head>
<style src="path/to/stylesheet"></style>
</head>
<body>
<div class="row">
<div class="column column-xs-12 column-md-15 column-lg-20">Info</div>
<div class="column column-xs-12 column-md-9 column-lg-4">Other Info</div>
</div>
</body>
</html>
.column-* classes must exist inside a .row class. When using a .column-* class
it must be prefaced with a .column class. This is done to separate the layouts into
what is common for all columns and what is specific for each media query set of columns.
Check out the source src/grid_system.less file. It has a lot of comments on what it is doing.
Run the following two commands in separate terminal windows to test out the grid system.
gruntcd example && python -m SimpleHTTPServerFAQs
This repository contains a small grid system for easy application development. It supports 24 columns as well as `RTL` and `LTR` layouts.
The npm package grid-system receives a total of 0 weekly downloads. As such, grid-system popularity was classified as not popular.
We found that grid-system demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious PyPI package semantic-types steals Solana private keys via transitive dependency installs using monkey patching and blockchain exfiltration.
Security News
New CNA status enables OpenJS Foundation to assign CVEs for security vulnerabilities in projects like ESLint, Fastify, Electron, and others, while leaving disclosure responsibility with individual maintainers.
Product
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.