Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

44
LINES

< > BotCompany Repo | #1030243 // hcss_gridStyle

JavaX fragment (include) [tags: use-pretranspiled]

Libraryless. Click here for Pure Java version (4140L/24K).

// 3 equally sized columns on desktop, 1 column on mobile
// classes: grid-container, grid-item, grid-section
sS hcss_gridStyle(O... _) {
  optPar S rowHeight;
  
  ret hcss([[
    .grid-container {
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto;
      grid-gap: 10px;
      padding: 10px;
    }

    .grid-item {
      padding: 10px;
    }
    
    .grid-section {
      width: 100%;
      padding-bottom: 10px;
    }

    @media (max-width: 600px) {
      .grid-container {
        display: block;
      }
    }
    
    @media (min-width: 601px) {
      .grid-container {
        display: grid;
      }
      
      .grid-item {
        ]] + (empty(rowHeight) ? "" : "min-height: " + rowHeight + ";") + [[
        padding-bottom: 20px;
      }
      
      .grid-section {
        ]] + stringIf(nempty(rowHeight), "height: 100%;") + [[
      }
    }
  ]]);
}

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