Skip to content

Commit

Permalink
address #1 by documenting overflow in README. Bump version.
Browse files Browse the repository at this point in the history
  • Loading branch information
Michael Warner authored and Michael Warner committed Sep 18, 2023
1 parent a69aad4 commit 5ba3262
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 8 deletions.
17 changes: 10 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,18 +57,21 @@ module.exports = {
Use the `` `grid-inner-${n}` `` utilities to create inner-border-only grids with `n` equally sized columns. Supported values for `n` are the numbers 1–12, but you can also supply arbitrary values like `grid-inner-[n]` or `grid-inner-[n,m]`, where `n` is still the number of columns and where `m` is the desired border-width in pixels. Finally, there's `grid-inner-none`, which is for "canceling" the inner-grid layout altogether and is meant to be used with responsive variants (more on this [below](#the-none-value)).

```html
<!-- grid-wrapper -->
<div class="grid-inner-1 sm:grid-inner-[2,4] md:grid-inner-3 lg:grid-inner-none border-red-500 border-solid">
<!-- grid-items -->
<div></div>
<div></div>
<div></div>
<!-- etc. -->
<div class="overflow-hidden"><!-- (if overflow is a problem; see notes below) -->
<!-- grid-wrapper -->
<div class="grid-inner-1 sm:grid-inner-[2,4] md:grid-inner-3 lg:grid-inner-none border-red-500 border-solid">
<!-- grid-items -->
<div></div>
<div></div>
<div></div>
<!-- etc. -->
</div>
</div>
```

### Important Notes (Read This!)

- The grid-wrapper gets a bit of negative horizontal `margin`. If this results in overflow/scrollbars, simply wrap the grid-wrapper in an element that has `overflow: hidden`, like in the example above. (This probably won't be necessary unless the grid-wrapper stretches the full width of the screen.)
- Don't try to set `gap` on the grid-wrapper. Instead, achieve spacing by putting `padding` on (or in) the grid-items.
- Don't try to set `grid-column` on the grid-items (the Tailwind `col-span-` utilities).
- Don't try to set any `margin` or `border-width` on either the grid-wrapper or the grid-items.
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@michaelallenwarner/tailwind-grid-inner",
"version": "1.0.1",
"version": "1.0.2",
"description": "A Tailwind CSS plugin for making grids with inner borders but no outer borders.",
"main": "./lib/index.js",
"files": [
Expand Down

0 comments on commit 5ba3262

Please sign in to comment.