CSS Grid Perfect Tetris/Metro Layout? [duplicate]












0
















This question already has an answer here:




  • CSS-only masonry layout

    1 answer




I have a grid with 3 template columns of 320px and completely implicit rows of 20px. A bunch of random dashboard cards will be placed in the grid, every card with its own intrinsic width and height based on content (graph, text description, etc). I would like the grid to automatically fit the cards as closely as possible, left-to-right and top-to-bottom.



I thought putting auto / auto for grid-row and grid-column on each of the cards would do the trick, by just automatically placing them in the next available spots and taking up as many columns and rows as necessary, but it did nothing and all the cards are squished to a single tiny row and one column.



Let's say I have 4 cards in this order: A, B, C, D.



Desired Effect



-------------------- --------

|                  | |      |

|        A         | |      |

|                  | |      |

-------------------- |  B   |

------------ ------- |      |

|          | |  D  | |      |

|     C    | ------- |      |

|          |         --------

------------


Using Flexbox (Row)



-------------------- ---------

|                  | |       |

|        A         | |       |

|                  | |       |

-------------------- |   B   |

                     |       |

    wasted space     |       |

    feelsbadman      |       |

                     ---------

------------ -------

|          | |  D  |

|     C    | -------

|          |

------------





css css-grid metro-ui-css







share|improve this question













marked as duplicate by Sam Claus, Community♦ Jan 2 at 1:39


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.























    0
















    This question already has an answer here:




    • CSS-only masonry layout

      1 answer




    I have a grid with 3 template columns of 320px and completely implicit rows of 20px. A bunch of random dashboard cards will be placed in the grid, every card with its own intrinsic width and height based on content (graph, text description, etc). I would like the grid to automatically fit the cards as closely as possible, left-to-right and top-to-bottom.



    I thought putting auto / auto for grid-row and grid-column on each of the cards would do the trick, by just automatically placing them in the next available spots and taking up as many columns and rows as necessary, but it did nothing and all the cards are squished to a single tiny row and one column.



    Let's say I have 4 cards in this order: A, B, C, D.



    Desired Effect



    -------------------- --------
    
|                  | |      |
    
|        A         | |      |
    
|                  | |      |
    
-------------------- |  B   |
    
------------ ------- |      |
    
|          | |  D  | |      |
    
|     C    | ------- |      |
    
|          |         --------
    
------------


    Using Flexbox (Row)



    -------------------- ---------
    
|                  | |       |
    
|        A         | |       |
    
|                  | |       |
    
-------------------- |   B   |
    
                     |       |
    
    wasted space     |       |
    
    feelsbadman      |       |
    
                     ---------
    
------------ -------
    
|          | |  D  |
    
|     C    | -------
    
|          |
    
------------





    css css-grid metro-ui-css







    share|improve this question













    marked as duplicate by Sam Claus, Community♦ Jan 2 at 1:39


    This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.





















      0












      0








      0









      This question already has an answer here:




      • CSS-only masonry layout

        1 answer




      I have a grid with 3 template columns of 320px and completely implicit rows of 20px. A bunch of random dashboard cards will be placed in the grid, every card with its own intrinsic width and height based on content (graph, text description, etc). I would like the grid to automatically fit the cards as closely as possible, left-to-right and top-to-bottom.



      I thought putting auto / auto for grid-row and grid-column on each of the cards would do the trick, by just automatically placing them in the next available spots and taking up as many columns and rows as necessary, but it did nothing and all the cards are squished to a single tiny row and one column.



      Let's say I have 4 cards in this order: A, B, C, D.



      Desired Effect



      -------------------- --------
      
|                  | |      |
      
|        A         | |      |
      
|                  | |      |
      
-------------------- |  B   |
      
------------ ------- |      |
      
|          | |  D  | |      |
      
|     C    | ------- |      |
      
|          |         --------
      
------------


      Using Flexbox (Row)



      -------------------- ---------
      
|                  | |       |
      
|        A         | |       |
      
|                  | |       |
      
-------------------- |   B   |
      
                     |       |
      
    wasted space     |       |
      
    feelsbadman      |       |
      
                     ---------
      
------------ -------
      
|          | |  D  |
      
|     C    | -------
      
|          |
      
------------





      css css-grid metro-ui-css







      share|improve this question















      This question already has an answer here:




      • CSS-only masonry layout

        1 answer




      I have a grid with 3 template columns of 320px and completely implicit rows of 20px. A bunch of random dashboard cards will be placed in the grid, every card with its own intrinsic width and height based on content (graph, text description, etc). I would like the grid to automatically fit the cards as closely as possible, left-to-right and top-to-bottom.



      I thought putting auto / auto for grid-row and grid-column on each of the cards would do the trick, by just automatically placing them in the next available spots and taking up as many columns and rows as necessary, but it did nothing and all the cards are squished to a single tiny row and one column.



      Let's say I have 4 cards in this order: A, B, C, D.



      Desired Effect



      -------------------- --------
      
|                  | |      |
      
|        A         | |      |
      
|                  | |      |
      
-------------------- |  B   |
      
------------ ------- |      |
      
|          | |  D  | |      |
      
|     C    | ------- |      |
      
|          |         --------
      
------------


      Using Flexbox (Row)



      -------------------- ---------
      
|                  | |       |
      
|        A         | |       |
      
|                  | |       |
      
-------------------- |   B   |
      
                     |       |
      
    wasted space     |       |
      
    feelsbadman      |       |
      
                     ---------
      
------------ -------
      
|          | |  D  |
      
|     C    | -------
      
|          |
      
------------




      This question already has an answer here:




      • CSS-only masonry layout

        1 answer







      css css-grid metro-ui-css




      css css-grid metro-ui-css






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Jan 2 at 1:07









      Sam ClausSam Claus

      652722




      652722




      marked as duplicate by Sam Claus, Community♦ Jan 2 at 1:39


      This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.









      marked as duplicate by Sam Claus, Community♦ Jan 2 at 1:39


      This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.


























          1 Answer
          1






          active

          oldest

          votes


















          0














          It appears my question is a duplicate of CSS-only masonry layout. Thanks to Michael_B for finding that.






          share|improve this answer






























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            It appears my question is a duplicate of CSS-only masonry layout. Thanks to Michael_B for finding that.






            share|improve this answer




























              0














              It appears my question is a duplicate of CSS-only masonry layout. Thanks to Michael_B for finding that.






              share|improve this answer


























                0












                0








                0







                It appears my question is a duplicate of CSS-only masonry layout. Thanks to Michael_B for finding that.






                share|improve this answer













                It appears my question is a duplicate of CSS-only masonry layout. Thanks to Michael_B for finding that.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Jan 2 at 1:39









                Sam ClausSam Claus

                652722




                652722

















                    -

                    Popular posts from this blog

                    Monofisismo

                    Image
                    Monofisismo (do grego: monos - "único, singular" e physis - "natureza") é o ponto de vista cristológico que defende que, depois da união do divino e do humano na encarnação histórica, Jesus Cristo, como encarnação do Filho ou Verbo ( Logos ) de Deus, teria apenas uma única "natureza", a divina, e não uma síntese de ambas. O monofisismo é contraposto pelo diofisismo (ou "diafisismo"), que defende que Jesus preservou em si as duas naturezas. Historicamente, o monofisismo se refere primordialmente à posição dos que (especialmente no Egito e, em menor grau, na Síria) rejeitaram as decisões do Concílio de Calcedônia em 451 (o quarto concílio ecumênico). Os membros mais moderados entre eles, porém, defendem a teologia "miafisita", que se tornou a oficial para as Igrejas Ortodoxas Orientais. Muitos ortodoxos orientais, porém, rejeitam essa classificação, mesmo como um termo genérico, mas ele é amplamente utilizado na literatura históri...
                    Read more

                    Angular Downloading a file using contenturl with Basic Authentication

                    Image
                    0 I have a contentUrl when user clicks on that,file should be downloaded. If I try to browse the contentUrl in the browser it asks for Userid and password.I believe this is Basic Authentication.I dont want user to enter UserId and Password so I am passing it Authorization(Please see below code). Url looks some thing like this: http://XXX.XXX.XX.XXX:8080/flowable-rest/service/runtime/tasks/90875/attachments/90555/content let username : string = 'admin'; let pwd : string = 'test'; let headers = new Headers(); headers.set('Accept', 'text/json'); headers.append('Content-Type', 'application/json'); headers.set('Access-Control-Allow-Origin', '*'); headers.set('Access-Control-Allow-Methods','POST, GET, OPTIONS, PUT, DELETE'); head...
                    Read more

                    Olmecas

                    Image
                    Monumento 1, uma das quatro cabeças colossais encontradas em La Venta, com altura aproximada de 3 metros Olmecas é a designação do povo e da civilização que estiveram na origem da antiga cultura pré-colombiana da Mesoamérica e que se desenvolveram nas regiões tropicais do centro-sul do atual México durante o pré-clássico, próximo de onde hoje estão localizados os estados mexicanos de Veracruz e Tabasco, no Istmo de Tehuantepec, numa zona designada área nuclear olmeca. A cultura olmeca floresceu nesta região aproximadamente entre 1500 e 400 a.C., [ 1 ] e crê-se que tenha sido a civilização-mãe de todas as civilizações mesoamericanas que se desenvolveram posteriormente. [ 2 ] No entanto, desconhece-se a sua exacta filiação étnica, ainda que existam numerosas hipóteses colocadas para tentar resolver esta questão. O etnónimo olmeca foi cunhado pelos arqueólogos do século XX, e não devem confundir-se com os muito posteriores olmecas-xicalancas que ocuparam vários locais do México...
                    Read more