You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Let's say that everything works - for now. Added changing label and delete button color depending on grid-item background, improved readme, change order of main buttons
It's a little web app that I've made while I was learning CSS Grid and bored at work. I thought that it would be nice to have something interactive to try and see what Grid can reeally do, so here it is - Grid Playground.
3
+
It's a little web app that I've made while I was learning CSS Grid and bored at work. I thought that it would be nice to have something interactive to try and see what Grid can really do, so here it is - Grid Playground.
4
4
5
5
Right now you can:
6
6
- add or delete grid items,
7
7
- change the number of rows and column,
8
8
- change grid container width and height,
9
9
- change the column and row gap,
10
10
- change grid-auto-flow.
11
+
- edit every item properties.
11
12
12
13
But there will be more options in the next releases.
13
14
14
-
If you need help, you can clikc the "Feeling Lost?" button which will open a modal box with all the basic grid properties used in this app.
15
+
If you need help, you can click the "Nees help?" button which will open a modal box with all the basic grid properties used in this app.
15
16
16
17
DICSLAIMER: There are no official definitions here - use MDN to see those.
17
18
19
+
Cool features:
20
+
- Each item has random generated background-color,
21
+
- Each item labels and button font color is generated using HSP algorithm for brightness,
22
+
- It's a PWA so it almost as good as native app,
23
+
- There are some cool links at the bottom if you want to really master Grid,
24
+
- Maybe it's not perfect, but it works!
25
+
18
26
Made entirely with HTML, CSS (Sass) and ES6 JavaScript.
19
27
20
-
Live - https://michalgrochowski.github.io/grid-playground/app/
28
+
Live - https://michalgrochowski.github.io/grid-playground/dist
<h3class="grid-options__title">Here are the basic CSS Grid properties used in this app:</h3>
74
+
<h3class="grid-options__title">Here are the basic CSS Grid properties:</h3>
75
+
<pclass="grid-options__paragraph grid-options__paragraph--italic">Not all of them are used in this app or are used in a different way - you can find all the details below</p>
76
+
<pclass="grid-options__paragraph">To use CSS Grid, first you have to add <codeclass="grid-options__code">"display: grid"</code> to your container. You can also set it to <codeclass="grid-options__code">"inline-grid"</code>. There is one more option, <codeclass="grid-options__code">"display: subgrid"</code> - useful if the elements parent has <codeclass="grid-options__code">"display: grid"</code> and you want your element and its content to be laid out according to the grid model.</p>
<pclass="grid-options__paragraph"><strong>width and height</strong> - pretty self explanatory, it's height and width of the grid container.</p>
78
+
<pclass="grid-options__paragraph"><strong>width and height</strong> - pretty self explanatory, it's the height and width of the grid container.</p>
77
79
<pclass="grid-options__paragraph"><strong>columns and rows</strong> - full property names are <codeclass="grid-options__code">"grid-template-columns"</code> and <codeclass="grid-options__code">"grid-template-rows"</code>. They specify how many columns and rows the grid will have. You can put there any value in px, %, rem, em, vh, vw or fr. Shorthand property is <codeclass="grid-options__code">"grid-template"</code>. Here we are using evenly sized columns and rows with <codeclass="grid-options__code">"repeat(number of columns/rows, size of column/row)"</code> option, but in your own grid you can use named areas or different values for each column/row, for example: <br>
Yes, you can name very column and every row of your grid - pretty neat!</p>
79
82
<pclass="grid-options__paragraph"><strong>column gap and row gap</strong> - full property names are <codeclass="grid-options__code">"grid-column-gap"</code> and <codeclass="grid-options__code">"grid-row-gap"</code>. They specify the size of the gutters between columns and rows. You can put there any value in px, %, rem, em, vh, vw or fr. Shorthand property is <codeclass="grid-options__code">"grid-gap"</code>.</p>
80
-
<pclass="grid-options__paragraph"><strong>grid-auto-flow</strong> - Grid has preety great auto-placement algorithm, and <codeclass="grid-options__code">"grid-auto-flow"</code> property defines how should it act. If you set it to <codeclass="grid-options__code">"column"</code> it will place new grid items in available columns or create a new one and place it there. If you set it to <codeclass="grid-options__code">"row"</code> it will place new grid items in available rows or create a new one and place it there. Last option, <codeclass="grid-options__code">"dense"</code>, will try to fit any new items in available spots, also changing the order of grid items, so be careful with that.</p>
83
+
<pclass="grid-options__paragraph"><strong>grid-auto-flow</strong> - Grid has pretty great auto-placement algorithm, and <codeclass="grid-options__code">"grid-auto-flow"</code> property defines how should it act. If you set it to <codeclass="grid-options__code">"column"</code> it will place new grid items in available columns or create a new one and place it there. If you set it to <codeclass="grid-options__code">"row"</code> it will place new grid items in available rows or create a new one and place it there. Last option, <codeclass="grid-options__code">"dense"</code>, will try to fit any new items in available spotsand may also change the order of your grid items, so be careful with that.</p>
<pclass="grid-options__paragraph"><strong>grid-column-start</strong> - specifies in which column the item will start. Given number refers to the start of the column. Only integers are allowed.</p>
83
-
<pclass="grid-options__paragraph"><strong>grid-column-end</strong> - specifies in which column the item will end. Given number refers to the start of the column, so for example if you want an item to span over columns 1-4, you have to put 5 in there. Only integers are allowed.</p>
84
-
<pclass="grid-options__paragraph"><strong>grid-row-start</strong> - specifies in which row the item will start. Given number refers to the start of the row. Only integers are allowed.</p>
85
-
<pclass="grid-options__paragraph"><strong>grid-row-end</strong> - specifies in which row the item will end. Only integers are allowed. Given number refers to the start of the row, so for example if you want an item to span over rows 1-3, you have to put 4 in there.</p>
85
+
<pclass="grid-options__paragraph"><strong>grid-column-start</strong> - specifies in which column the item will start. Given number refers to the start of the column. You can use integers to indicate specific column number, named area if you have one or <codeclass="grid-options__code">"span integer"</code> to tell the item to span over given number of columns.</p>
86
+
<pclass="grid-options__paragraph"><strong>grid-column-end</strong> - specifies in which column the item will end. Given number refers to the start of the column, so for example if you want an item to span over columns 1-3, you have to put 4 in there. You can use integers to indicate specific column number, named area if you have one or <codeclass="grid-options__code">"span integer"</code> to tell the item to span over given number of columns.</p>
87
+
<pclass="grid-options__paragraph"><strong>grid-row-start</strong> - specifies in which row the item will start. Given number refers to the start of the row. You can use integers to indicate specific row number, named area if you have one or <codeclass="grid-options__code">"span integer"</code> to tell the item to span over given number of rows.</p>
88
+
<pclass="grid-options__paragraph"><strong>grid-row-end</strong> - specifies in which row the item will end. Given number refers to the start of the row, so for example if you want an item to span over rows 1-3, you have to put 4 in there. You can use integers to indicate specific row number, named area if you have one or <codeclass="grid-options__code">"span integer"</code> to tell the item to span over given number of rows.</p>
<pclass="grid-options__paragraph">CSS Grid offers a lot of more options than shown in this playground. Options like <codeclass="grid-options__code">"align-items"</code>, <codeclass="grid-options__code">"justify-items"</code>, <codeclass="grid-options__code">"align-content"</code> and <codeclass="grid-options__code">"justify-content"</code> works pretty much the same as in Flexbox, so if you know that you should also be able to use it in your grid. There is also the <codeclass="grid-options__code">"grid"</code> property, in which you specify all of the above. If you ask me, it makes the code a lot less readable, but feel free to use it.</p>
88
-
<pclass="grid-options__paragraph grid-options__paragraph--last">Grid items also have some more properties, like <codeclass="grid-options__code">"grid-area"</code>in which you tell the item which named areas of your grid should it take, and of course <codeclass="grid-options__code">"align-self"</code> and <codeclass="grid-options__code">"justify-self"</code>. You can also use short-hand properties <codeclass="grid-options__code">"grid-column"</code> and <codeclass="grid-options__code">"grid-row"</code> to specify both the start and the end of your item.</p>
90
+
<pclass="grid-options__paragraph">CSS Grid offers a lot of more options than shown in this app. Options like <codeclass="grid-options__code">"align-items"</code>, <codeclass="grid-options__code">"justify-items"</code>, <codeclass="grid-options__code">"align-content"</code> and <codeclass="grid-options__code">"justify-content"</code> works pretty much the same as in Flexbox, so if you know how to use them you are good to go. There is also the <codeclass="grid-options__code">"grid"</code> property, in which you specify all of the above properties. It makes the code a lot less readable in my opinion, but feel free to use it.</p>
91
+
<pclass="grid-options__paragraph grid-options__paragraph--last">Grid items also have some more properties, like <codeclass="grid-options__code">"grid-area"</code>that tells the item which named areas of your grid should it take or specify both columns and rows start and end, also there are of course <codeclass="grid-options__code">"align-self"</code> and <codeclass="grid-options__code">"justify-self"</code> - again, works the same way as with Flex items. You can also use short-hand properties <codeclass="grid-options__code">"grid-column"</code> and <codeclass="grid-options__code">"grid-row"</code> to specify both the start and the end of your item.</p>
<pclass="bonus-materials__description">Because CSS Grid is much more robust than shown in this app, I recommend looking at additional resources listed below:</p>
<aclass="bonus-materials__link" href="https://github.com/rachelandrew/gridbugs" rel="noopener" target="_blank" title="">Nice list of known Grid bugs in various browsers.</a>
270
273
</section>
271
274
<footerid="footer" class="footer">
272
275
<pclass="footer__text">Built by Michał Grochowski @ <aclass="footer__link" href="https://dobrywebdev.pl" rel="noopener" target="_blank">dobrywebdev.pl</a></p>
0 commit comments