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: | 261 / 376 |
Version history: | 14 change(s) |
Referenced in: | [show references] |