Libraryless. Click here for Pure Java version (4140L/24K).
1 | // 3 equally sized columns on desktop, 1 column on mobile |
2 | // classes: grid-container, grid-item, grid-section |
3 | sS hcss_gridStyle(O... _) {
|
4 | optPar S rowHeight; |
5 | |
6 | ret hcss([[ |
7 | .grid-container {
|
8 | grid-template-columns: 1fr 1fr 1fr; |
9 | grid-template-rows: auto; |
10 | grid-gap: 10px; |
11 | padding: 10px; |
12 | } |
13 | |
14 | .grid-item {
|
15 | padding: 10px; |
16 | } |
17 | |
18 | .grid-section {
|
19 | width: 100%; |
20 | padding-bottom: 10px; |
21 | } |
22 | |
23 | @media (max-width: 600px) {
|
24 | .grid-container {
|
25 | display: block; |
26 | } |
27 | } |
28 | |
29 | @media (min-width: 601px) {
|
30 | .grid-container {
|
31 | display: grid; |
32 | } |
33 | |
34 | .grid-item {
|
35 | ]] + (empty(rowHeight) ? "" : "min-height: " + rowHeight + ";") + [[ |
36 | padding-bottom: 20px; |
37 | } |
38 | |
39 | .grid-section {
|
40 | ]] + stringIf(nempty(rowHeight), "height: 100%;") + [[ |
41 | } |
42 | } |
43 | ]]); |
44 | } |
download show line numbers debug dex old transpilations
Travelled to 4 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, vouqrxazstgt
No comments. add comment
| Snippet ID: | #1030243 |
| Snippet name: | hcss_gridStyle |
| Eternal ID of this version: | #1030243/15 |
| Text MD5: | 72eca8e1551ce75c414faba1e88a99eb |
| Transpilation MD5: | 46fe36b35de7412cc51161f37227d015 |
| Author: | stefan |
| Category: | javax / html |
| Type: | JavaX fragment (include) |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2020-11-20 14:34:23 |
| Source code size: | 930 bytes / 44 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 190 / 284 |
| Version history: | 14 change(s) |
| Referenced in: | [show references] |