Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit bc2bd84

Browse files
feat(snippets): ✨ add tailwind grid snippets (#30)
closes #29 
1 parent 0fdf128 commit bc2bd84

File tree

4 files changed

+920
-33
lines changed

4 files changed

+920
-33
lines changed

‎CHANGELOG.md

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -11,27 +11,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
1111
* **snippets:** ✨ add tailwind flexbox utilities ([#27](https://github.com/navin-moorthy/vscode-css-snippets/issues/27)) ([bbef38b](https://github.com/navin-moorthy/vscode-css-snippets/commit/bbef38bb89e589732b590ddf5adcf80910030afa)), closes [#26](https://github.com/navin-moorthy/vscode-css-snippets/issues/26) [#28](https://github.com/navin-moorthy/vscode-css-snippets/issues/28)
1212

1313

14-
### ♻️ Chores
15-
16-
* **changelog:** ✏️ fix double generated changelog ([abe2a15](https://github.com/navin-moorthy/vscode-css-snippets/commit/abe2a158ee35ad3a2b1eab3e635734a29d1e95ce))
17-
18-
19-
20-
21-
22-
# [0.3.0](https://github.com/navin-moorthy/vscode-css-snippets/compare/v0.2.1...v0.3.0) (2020年07月21日)
23-
24-
25-
### ✨ Features
26-
27-
* **snippets:** ✨ add tailwind flexbox utilities ([#27](https://github.com/navin-moorthy/vscode-css-snippets/issues/27)) ([bbef38b](https://github.com/navin-moorthy/vscode-css-snippets/commit/bbef38bb89e589732b590ddf5adcf80910030afa)), closes [#26](https://github.com/navin-moorthy/vscode-css-snippets/issues/26) [#28](https://github.com/navin-moorthy/vscode-css-snippets/issues/28)
28-
29-
30-
### ♻️ Chores
31-
32-
* **changelog:** ✏️ fix double generated changelog ([abe2a15](https://github.com/navin-moorthy/vscode-css-snippets/commit/abe2a158ee35ad3a2b1eab3e635734a29d1e95ce))
33-
34-
3514

3615

3716

@@ -43,11 +22,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
4322
* **readme:** ✏️ fix emoji and local navigation ([a6b5a0d](https://github.com/navin-moorthy/vscode-css-snippets/commit/a6b5a0db87f0cc58f1a263417481a36f08c1bdd1))
4423

4524

46-
### ♻️ Chores
47-
48-
* **changelog:** ✏️ fix double generated changelog ([e69de86](https://github.com/navin-moorthy/vscode-css-snippets/commit/e69de863cc2400c4ff6edf40369995d18e28e3cd))
49-
50-
5125

5226

5327

@@ -66,11 +40,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
6640
* **readme:** 📝 add attributions with links ([#25](https://github.com/navin-moorthy/vscode-css-snippets/issues/25)) ([ffe0c1e](https://github.com/navin-moorthy/vscode-css-snippets/commit/ffe0c1edd1b3d8a7c2202aae1fe584fff3ec96c6)), closes [#24](https://github.com/navin-moorthy/vscode-css-snippets/issues/24)
6741

6842

69-
### ♻️ Chores
70-
71-
* **changelog:** ✏️ remove double generated changelog ([a9d3f87](https://github.com/navin-moorthy/vscode-css-snippets/commit/a9d3f87e7b2c53d571df0613245bd578218436d5))
72-
73-
7443

7544

7645

@@ -84,7 +53,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
8453

8554
### ♻️ Chores
8655

87-
* **changelog:** ✏️ fix changelog generated ([6781919](https://github.com/navin-moorthy/vscode-css-snippets/commit/6781919b97827c6ce7c3c5d0ea66735c5a8bfa6f))
8856
* **logo:** 🔧 move logo out of media to support vsce publish ([0567f1b](https://github.com/navin-moorthy/vscode-css-snippets/commit/0567f1b600ef78c7e05b56fa616940462641eb61))
8957
* **typo:** ✏️ issue url typo ([e70a650](https://github.com/navin-moorthy/vscode-css-snippets/commit/e70a650a8b9c4188369eb020dfe4f0111df5d867))
9058

@@ -134,7 +102,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
134102
* **logo:** 🔧 add logo to package ([#2](https://github.com/navin-moorthy/vscode-css-snippets/issues/2)) ([96fa2b8](https://github.com/navin-moorthy/vscode-css-snippets/commit/96fa2b822f7c41f2a43e25064347b93821887a90)), closes [#1](https://github.com/navin-moorthy/vscode-css-snippets/issues/1)
135103
* **prettier:** 🔧 add changelog to prettier ignore ([1dace05](https://github.com/navin-moorthy/vscode-css-snippets/commit/1dace0561311acc14a482556408eb7b7cfe042d1))
136104
* **preview:** 🔧 add preview flag to the extension ([#6](https://github.com/navin-moorthy/vscode-css-snippets/issues/6)) ([1b06c4e](https://github.com/navin-moorthy/vscode-css-snippets/commit/1b06c4e39b9159701551ed16766651d579a225c3)), closes [#5](https://github.com/navin-moorthy/vscode-css-snippets/issues/5)
137-
* **release:** publish v0.0.1 ([58bb339](https://github.com/navin-moorthy/vscode-css-snippets/commit/58bb33901f270a902b15403bc6889178c563fae6))
138105
* **theme:** 🔧 add gallery theme and color ([#4](https://github.com/navin-moorthy/vscode-css-snippets/issues/4)) ([d55bb21](https://github.com/navin-moorthy/vscode-css-snippets/commit/d55bb2129b99af8190d9044fdbd05502a6271ec7))
139106

140107

‎README.md

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,13 @@ You can enable tab completion (recommended) by opening
6767
- [Flex Grow](#flex-grow)
6868
- [Flex Shrink](#flex-shrink)
6969
- [Flex Order](#flex-order)
70+
- [Tailwind Grid](#tailwind-grid)
71+
- [Grid Template Columns](#grid-template-columns)
72+
- [Grid Column Start / End](#grid-column-start--end)
73+
- [Grid Template Rows](#grid-template-rows)
74+
- [Grid Row Start / End](#grid-row-start--end)
75+
- [Gap](#gap)
76+
- [Grid Auto Flow](#grid-auto-flow)
7077
- [1 line layouts](#1-line-layouts)
7178
- [Extra Guides](#extra-guides)
7279
- [Snippets generation from Selected line/lines](#snippets-generation-from-selected-linelines)
@@ -371,6 +378,183 @@ You can enable tab completion (recommended) by opening
371378
| `order-11` | order: 11; |
372379
| `order-12` | order: 12; |
373380

381+
### [Tailwind](https://tailwindcss.com/) Grid
382+
383+
#### [Grid Template Columns](https://tailwindcss.com/docs/grid-template-columns)
384+
385+
| Snippet | Purpose |
386+
| ---------------- | -------------------------------------------------- |
387+
| `grid-cols-1` | grid-template-columns: repeat(1, minmax(0, 1fr)); |
388+
| `grid-cols-2` | grid-template-columns: repeat(2, minmax(0, 1fr)); |
389+
| `grid-cols-3` | grid-template-columns: repeat(3, minmax(0, 1fr)); |
390+
| `grid-cols-4` | grid-template-columns: repeat(4, minmax(0, 1fr)); |
391+
| `grid-cols-5` | grid-template-columns: repeat(5, minmax(0, 1fr)); |
392+
| `grid-cols-6` | grid-template-columns: repeat(6, minmax(0, 1fr)); |
393+
| `grid-cols-7` | grid-template-columns: repeat(7, minmax(0, 1fr)); |
394+
| `grid-cols-8` | grid-template-columns: repeat(8, minmax(0, 1fr)); |
395+
| `grid-cols-9` | grid-template-columns: repeat(9, minmax(0, 1fr)); |
396+
| `grid-cols-10` | grid-template-columns: repeat(10, minmax(0, 1fr)); |
397+
| `grid-cols-11` | grid-template-columns: repeat(11, minmax(0, 1fr)); |
398+
| `grid-cols-12` | grid-template-columns: repeat(12, minmax(0, 1fr)); |
399+
| `grid-cols-none` | grid-template-columns: none; |
400+
401+
#### [Grid Column Start / End](https://tailwindcss.com/docs/grid-column)
402+
403+
| Snippet | Purpose |
404+
| ---------------- | ------------------------------- |
405+
| `col-auto` | grid-column: auto; |
406+
| `col-span-1` | grid-column: span 1 / span 1; |
407+
| `col-span-2` | grid-column: span 2 / span 2; |
408+
| `col-span-3` | grid-column: span 3 / span 3; |
409+
| `col-span-4` | grid-column: span 4 / span 4; |
410+
| `col-span-5` | grid-column: span 5 / span 5; |
411+
| `col-span-6` | grid-column: span 6 / span 6; |
412+
| `col-span-7` | grid-column: span 7 / span 7; |
413+
| `col-span-8` | grid-column: span 8 / span 8; |
414+
| `col-span-9` | grid-column: span 9 / span 9; |
415+
| `col-span-10` | grid-column: span 10 / span 10; |
416+
| `col-span-11` | grid-column: span 11 / span 11; |
417+
| `col-span-12` | grid-column: span 12 / span 12; |
418+
| `col-start-1` | grid-column-start: 1; |
419+
| `col-start-2` | grid-column-start: 2; |
420+
| `col-start-3` | grid-column-start: 3; |
421+
| `col-start-4` | grid-column-start: 4; |
422+
| `col-start-5` | grid-column-start: 5; |
423+
| `col-start-6` | grid-column-start: 6; |
424+
| `col-start-7` | grid-column-start: 7; |
425+
| `col-start-8` | grid-column-start: 8; |
426+
| `col-start-9` | grid-column-start: 9; |
427+
| `col-start-10` | grid-column-start: 10; |
428+
| `col-start-11` | grid-column-start: 11; |
429+
| `col-start-12` | grid-column-start: 12; |
430+
| `col-start-13` | grid-column-start: 13; |
431+
| `col-start-auto` | grid-column-start: auto; |
432+
| `col-end-1` | grid-column-end: 1; |
433+
| `col-end-2` | grid-column-end: 2; |
434+
| `col-end-3` | grid-column-end: 3; |
435+
| `col-end-4` | grid-column-end: 4; |
436+
| `col-end-5` | grid-column-end: 5; |
437+
| `col-end-6` | grid-column-end: 6; |
438+
| `col-end-7` | grid-column-end: 7; |
439+
| `col-end-8` | grid-column-end: 8; |
440+
| `col-end-9` | grid-column-end: 9; |
441+
| `col-end-10` | grid-column-end: 10; |
442+
| `col-end-11` | grid-column-end: 11; |
443+
| `col-end-12` | grid-column-end: 12; |
444+
| `col-end-13` | grid-column-end: 13; |
445+
| `col-end-auto` | grid-column-end: auto; |
446+
447+
#### [Grid Template Rows](https://tailwindcss.com/docs/grid-template-rows)
448+
449+
| Snippet | Purpose |
450+
| ---------------- | ---------------------------------------------- |
451+
| `grid-rows-1` | grid-template-rows: repeat(1, minmax(0, 1fr)); |
452+
| `grid-rows-2` | grid-template-rows: repeat(2, minmax(0, 1fr)); |
453+
| `grid-rows-3` | grid-template-rows: repeat(3, minmax(0, 1fr)); |
454+
| `grid-rows-4` | grid-template-rows: repeat(4, minmax(0, 1fr)); |
455+
| `grid-rows-5` | grid-template-rows: repeat(5, minmax(0, 1fr)); |
456+
| `grid-rows-6` | grid-template-rows: repeat(6, minmax(0, 1fr)); |
457+
| `grid-rows-none` | grid-template-rows: none; |
458+
459+
#### [Grid Row Start / End](https://tailwindcss.com/docs/grid-row)
460+
461+
| Snippet | Purpose |
462+
| ---------------- | -------------------------- |
463+
| `row-auto` | grid-row: auto; |
464+
| `row-span-1` | grid-row: span 1 / span 1; |
465+
| `row-span-2` | grid-row: span 2 / span 2; |
466+
| `row-span-3` | grid-row: span 3 / span 3; |
467+
| `row-span-4` | grid-row: span 4 / span 4; |
468+
| `row-span-5` | grid-row: span 5 / span 5; |
469+
| `row-span-6` | grid-row: span 6 / span 6; |
470+
| `row-start-1` | grid-row-start: 1; |
471+
| `row-start-2` | grid-row-start: 2; |
472+
| `row-start-3` | grid-row-start: 3; |
473+
| `row-start-4` | grid-row-start: 4; |
474+
| `row-start-5` | grid-row-start: 5; |
475+
| `row-start-6` | grid-row-start: 6; |
476+
| `row-start-7` | grid-row-start: 7; |
477+
| `row-start-auto` | grid-row-start: auto; |
478+
| `row-end-1` | grid-row-end: 1; |
479+
| `row-end-2` | grid-row-end: 2; |
480+
| `row-end-3` | grid-row-end: 3; |
481+
| `row-end-4` | grid-row-end: 4; |
482+
| `row-end-5` | grid-row-end: 5; |
483+
| `row-end-6` | grid-row-end: 6; |
484+
| `row-end-7` | grid-row-end: 7; |
485+
| `row-end-auto` | grid-row-end: auto; |
486+
487+
#### [Gap](https://tailwindcss.com/docs/gap)
488+
489+
| Snippet | Purpose |
490+
| ------------ | -------------------- |
491+
| `gap-0` | gap: 0; |
492+
| `gap-1` | gap: 0.25rem; |
493+
| `gap-2` | gap: 0.5rem; |
494+
| `gap-3` | gap: 0.75rem; |
495+
| `gap-4` | gap: 1rem; |
496+
| `gap-5` | gap: 1.25rem; |
497+
| `gap-6` | gap: 1.5rem; |
498+
| `gap-8` | gap: 2rem; |
499+
| `gap-10` | gap: 2.5rem; |
500+
| `gap-12` | gap: 3rem; |
501+
| `gap-16` | gap: 4rem; |
502+
| `gap-20` | gap: 5rem; |
503+
| `gap-24` | gap: 6rem; |
504+
| `gap-32` | gap: 8rem; |
505+
| `gap-40` | gap: 10rem; |
506+
| `gap-48` | gap: 12rem; |
507+
| `gap-56` | gap: 14rem; |
508+
| `gap-64` | gap: 16rem; |
509+
| `gap-px` | gap: 1px; |
510+
| `row-gap-0` | row-gap: 0; |
511+
| `row-gap-1` | row-gap: 0.25rem; |
512+
| `row-gap-2` | row-gap: 0.5rem; |
513+
| `row-gap-3` | row-gap: 0.75rem; |
514+
| `row-gap-4` | row-gap: 1rem; |
515+
| `row-gap-5` | row-gap: 1.25rem; |
516+
| `row-gap-6` | row-gap: 1.5rem; |
517+
| `row-gap-8` | row-gap: 2rem; |
518+
| `row-gap-10` | row-gap: 2.5rem; |
519+
| `row-gap-12` | row-gap: 3rem; |
520+
| `row-gap-16` | row-gap: 4rem; |
521+
| `row-gap-20` | row-gap: 5rem; |
522+
| `row-gap-24` | row-gap: 6rem; |
523+
| `row-gap-32` | row-gap: 8rem; |
524+
| `row-gap-40` | row-gap: 10rem; |
525+
| `row-gap-48` | row-gap: 12rem; |
526+
| `row-gap-56` | row-gap: 14rem; |
527+
| `row-gap-64` | row-gap: 16rem; |
528+
| `row-gap-px` | row-gap: 1px; |
529+
| `col-gap-0` | column-gap: 0; |
530+
| `col-gap-1` | column-gap: 0.25rem; |
531+
| `col-gap-2` | column-gap: 0.5rem; |
532+
| `col-gap-3` | column-gap: 0.75rem; |
533+
| `col-gap-4` | column-gap: 1rem; |
534+
| `col-gap-5` | column-gap: 1.25rem; |
535+
| `col-gap-6` | column-gap: 1.5rem; |
536+
| `col-gap-8` | column-gap: 2rem; |
537+
| `col-gap-10` | column-gap: 2.5rem; |
538+
| `col-gap-12` | column-gap: 3rem; |
539+
| `col-gap-16` | column-gap: 4rem; |
540+
| `col-gap-20` | column-gap: 5rem; |
541+
| `col-gap-24` | column-gap: 6rem; |
542+
| `col-gap-32` | column-gap: 8rem; |
543+
| `col-gap-40` | column-gap: 10rem; |
544+
| `col-gap-48` | column-gap: 12rem; |
545+
| `col-gap-56` | column-gap: 14rem; |
546+
| `col-gap-64` | column-gap: 16rem; |
547+
| `col-gap-px` | column-gap: 1px; |
548+
549+
#### [Grid Auto Flow](https://tailwindcss.com/docs/grid-auto-flow)
550+
551+
| Snippet | Purpose |
552+
| --------------------- | ----------------------------- |
553+
| `grid-flow-row` | grid-auto-flow: row; |
554+
| `grid-flow-col` | grid-auto-flow: column; |
555+
| `grid-flow-row-dense` | grid-auto-flow: row dense; |
556+
| `grid-flow-col-dense` | grid-auto-flow: column dense; |
557+
374558
### [1 line layouts](https://1linelayouts.glitch.me/)
375559

376560
**[Learn 1linelayouts in detail from Web Dev →](https://web.dev/one-line-layouts/)**

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@
4747
"language": "css",
4848
"path": "./snippets/tailwind/flexbox.json"
4949
},
50+
{
51+
"language": "css",
52+
"path": "./snippets/tailwind/grid.json"
53+
},
5054
{
5155
"language": "css",
5256
"path": "./snippets/1linelayouts/snippets.json"

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /