css grid problem with background and wrappingTracks of CCS grid not shrinking when other tracks growHow to make auto-placed divs via grid-auto-flow:column stick to each other?How to stretch certain grid elements only?grid-auto-columns: 50px 50px 20px; without template or grid-areaSet cellpadding and cellspacing in CSS?Convert HTML + CSS to PDF with PHP?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSHow can I transition height: 0; to height: auto; using CSS?How do CSS triangles work?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?

Is there a word that describes the unjustified use of a more complex word?

How long would it take for people to notice a mass disappearance?

How to ask systemd to not start a system service on boot?

How should I tell my manager I'm not paying for an optional after work event I'm not going to?

Why is "breaking the mould" positively connoted?

Nested loops to process groups of pictures

Has the Hulk always been able to talk?

Endgame puzzle: How to avoid stalemate and win?

Are there terms in German for different skull shapes?

Using Im[] and Re[] Correctly

A factorization game

Is there a word for food that's gone 'bad', but is still edible?

What was the first story to feature the plot "the monsters were human all along"?

Dangerous workplace travelling

To kill a cuckoo

Handling Null values (and equivalents) routinely in Python

My first c++ game (snake console game)

Correct way of drawing empty, half-filled and fully filled circles?

Any examples of liquids volatile at room temp but non-flammable?

How can I get people to remember my character's gender?

Snap victim memorial reference in Avengers: Endgame

Why do these characters still seem to be the same age after the events of Endgame?

Why did the Apollo 13 crew extend the LM landing gear?

Desolate vs deserted



css grid problem with background and wrapping


Tracks of CCS grid not shrinking when other tracks growHow to make auto-placed divs via grid-auto-flow:column stick to each other?How to stretch certain grid elements only?grid-auto-columns: 50px 50px 20px; without template or grid-areaSet cellpadding and cellspacing in CSS?Convert HTML + CSS to PDF with PHP?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSHow can I transition height: 0; to height: auto; using CSS?How do CSS triangles work?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








2















I have a grid where I want it to work somewhat like it is except when there are only 1 or 2 cells I want it to auto size and not be a set of 3 with the last one holding its cell space. When I set repeat(3, 100px) value to auto-fit then it kills the column layout.
I still need it to wrap at 3. 






.parent 
 background: #f4f4f5;
 font-size:2em;
 border: 1px solid black;
 padding: 20px 0;
 text-align: center;
 width: 100%;

.parent .wrapper 
 display: inline-grid;
 grid-template-columns: repeat(3, 100px);
 box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.75);
 grid-auto-flow: row;
 background-color: white;


.cell 
 border: 1px solid gray;
 background-color: white;


.cell .inner 
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100px;
 height: 100px;
 text-align: center;

<div class="parent">
 <div class="wrapper">
 <div class="cell">
 <div class="inner">Cell 1</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 2</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 3</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 4</div>
 </div>
 </div> 
</div>








html css css3 css-grid







share|improve this question
























  • Unless you want to use JS, I think media queries are your best bet. Ideally, quantity queries would provide the easy fix, but it's just a concept at this point.

    – Michael_B
    Mar 23 at 1:46












  • maybe I didn't understand you properly, but why not grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) and set width: 300px on the wrapper?

    – kukkuz
    Mar 23 at 4:20












  • Then the columns would expand to fill the 300px width of the container. They would not be 300px. jsfiddle.net/qxa0ts95/1

    – Michael_B
    Mar 23 at 14:46

















2















I have a grid where I want it to work somewhat like it is except when there are only 1 or 2 cells I want it to auto size and not be a set of 3 with the last one holding its cell space. When I set repeat(3, 100px) value to auto-fit then it kills the column layout.
I still need it to wrap at 3. 






.parent 
 background: #f4f4f5;
 font-size:2em;
 border: 1px solid black;
 padding: 20px 0;
 text-align: center;
 width: 100%;

.parent .wrapper 
 display: inline-grid;
 grid-template-columns: repeat(3, 100px);
 box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.75);
 grid-auto-flow: row;
 background-color: white;


.cell 
 border: 1px solid gray;
 background-color: white;


.cell .inner 
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100px;
 height: 100px;
 text-align: center;

<div class="parent">
 <div class="wrapper">
 <div class="cell">
 <div class="inner">Cell 1</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 2</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 3</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 4</div>
 </div>
 </div> 
</div>








html css css3 css-grid







share|improve this question
























  • Unless you want to use JS, I think media queries are your best bet. Ideally, quantity queries would provide the easy fix, but it's just a concept at this point.

    – Michael_B
    Mar 23 at 1:46












  • maybe I didn't understand you properly, but why not grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) and set width: 300px on the wrapper?

    – kukkuz
    Mar 23 at 4:20












  • Then the columns would expand to fill the 300px width of the container. They would not be 300px. jsfiddle.net/qxa0ts95/1

    – Michael_B
    Mar 23 at 14:46













2












2








2








I have a grid where I want it to work somewhat like it is except when there are only 1 or 2 cells I want it to auto size and not be a set of 3 with the last one holding its cell space. When I set repeat(3, 100px) value to auto-fit then it kills the column layout.
I still need it to wrap at 3. 






.parent 
 background: #f4f4f5;
 font-size:2em;
 border: 1px solid black;
 padding: 20px 0;
 text-align: center;
 width: 100%;

.parent .wrapper 
 display: inline-grid;
 grid-template-columns: repeat(3, 100px);
 box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.75);
 grid-auto-flow: row;
 background-color: white;


.cell 
 border: 1px solid gray;
 background-color: white;


.cell .inner 
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100px;
 height: 100px;
 text-align: center;

<div class="parent">
 <div class="wrapper">
 <div class="cell">
 <div class="inner">Cell 1</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 2</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 3</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 4</div>
 </div>
 </div> 
</div>








html css css3 css-grid







share|improve this question
















I have a grid where I want it to work somewhat like it is except when there are only 1 or 2 cells I want it to auto size and not be a set of 3 with the last one holding its cell space. When I set repeat(3, 100px) value to auto-fit then it kills the column layout.
I still need it to wrap at 3. 






.parent 
 background: #f4f4f5;
 font-size:2em;
 border: 1px solid black;
 padding: 20px 0;
 text-align: center;
 width: 100%;

.parent .wrapper 
 display: inline-grid;
 grid-template-columns: repeat(3, 100px);
 box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.75);
 grid-auto-flow: row;
 background-color: white;


.cell 
 border: 1px solid gray;
 background-color: white;


.cell .inner 
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100px;
 height: 100px;
 text-align: center;

<div class="parent">
 <div class="wrapper">
 <div class="cell">
 <div class="inner">Cell 1</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 2</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 3</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 4</div>
 </div>
 </div> 
</div>








.parent 
 background: #f4f4f5;
 font-size:2em;
 border: 1px solid black;
 padding: 20px 0;
 text-align: center;
 width: 100%;

.parent .wrapper 
 display: inline-grid;
 grid-template-columns: repeat(3, 100px);
 box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.75);
 grid-auto-flow: row;
 background-color: white;


.cell 
 border: 1px solid gray;
 background-color: white;


.cell .inner 
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100px;
 height: 100px;
 text-align: center;

<div class="parent">
 <div class="wrapper">
 <div class="cell">
 <div class="inner">Cell 1</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 2</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 3</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 4</div>
 </div>
 </div> 
</div>





.parent 
 background: #f4f4f5;
 font-size:2em;
 border: 1px solid black;
 padding: 20px 0;
 text-align: center;
 width: 100%;

.parent .wrapper 
 display: inline-grid;
 grid-template-columns: repeat(3, 100px);
 box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.75);
 grid-auto-flow: row;
 background-color: white;


.cell 
 border: 1px solid gray;
 background-color: white;


.cell .inner 
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100px;
 height: 100px;
 text-align: center;

<div class="parent">
 <div class="wrapper">
 <div class="cell">
 <div class="inner">Cell 1</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 2</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 3</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 4</div>
 </div>
 </div> 
</div>





html css css3 css-grid




html css css3 css-grid






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 26 at 15:01









TylerH

16.1k105569




16.1k105569










asked Mar 23 at 0:53









me-meme-me

75311428




75311428












  • Unless you want to use JS, I think media queries are your best bet. Ideally, quantity queries would provide the easy fix, but it's just a concept at this point.

    – Michael_B
    Mar 23 at 1:46












  • maybe I didn't understand you properly, but why not grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) and set width: 300px on the wrapper?

    – kukkuz
    Mar 23 at 4:20












  • Then the columns would expand to fill the 300px width of the container. They would not be 300px. jsfiddle.net/qxa0ts95/1

    – Michael_B
    Mar 23 at 14:46

















  • Unless you want to use JS, I think media queries are your best bet. Ideally, quantity queries would provide the easy fix, but it's just a concept at this point.

    – Michael_B
    Mar 23 at 1:46












  • maybe I didn't understand you properly, but why not grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) and set width: 300px on the wrapper?

    – kukkuz
    Mar 23 at 4:20












  • Then the columns would expand to fill the 300px width of the container. They would not be 300px. jsfiddle.net/qxa0ts95/1

    – Michael_B
    Mar 23 at 14:46
















Unless you want to use JS, I think media queries are your best bet. Ideally, quantity queries would provide the easy fix, but it's just a concept at this point.

– Michael_B
Mar 23 at 1:46






Unless you want to use JS, I think media queries are your best bet. Ideally, quantity queries would provide the easy fix, but it's just a concept at this point.

– Michael_B
Mar 23 at 1:46














maybe I didn't understand you properly, but why not grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) and set width: 300px on the wrapper?

– kukkuz
Mar 23 at 4:20






maybe I didn't understand you properly, but why not grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) and set width: 300px on the wrapper?

– kukkuz
Mar 23 at 4:20














Then the columns would expand to fill the 300px width of the container. They would not be 300px. jsfiddle.net/qxa0ts95/1

– Michael_B
Mar 23 at 14:46





Then the columns would expand to fill the 300px width of the container. They would not be 300px. jsfiddle.net/qxa0ts95/1

– Michael_B
Mar 23 at 14:46












1 Answer
1






active

oldest

votes


















0














So you want to make the grid-container auto-sized less that 3 items and wrap after that - here's a solution that uses implicit grids.




  • use a single column inline grid container:



    display: inline-grid;
    grid-template-columns: 100px;
    grid-template-rows: 100px;



  • size your implicit grids as 100px x 100px using:



    grid-auto-columns: 100px;
    grid-auto-rows: 100px;


  • place your second item to the second row using grid-column: 2; and your third item to the third row using grid-column: 3


Now you will have a 3 x 3 grid - see demo below:






* 
 box-sizing: border-box;


.parent 
 background: #f4f4f5;
 font-size: 2em;
 border: 1px solid black;
 padding: 20px 0;
 text-align: center;
 width: 100%;


.parent .wrapper 
 display: inline-grid;
 grid-template-columns: 100px; /* one column layout */
 grid-template-rows: 100px; /* sizes the rows */
 grid-auto-columns: 100px; /* sizing columns of implicit grid */
 grid-auto-rows: 100px; /* sizing rows of implicit grid */
 box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.75);
 grid-auto-flow: row;
 background-color: white;


.cell:nth-child(2) 
 grid-column: 2; /* places it in the second column */


.cell:nth-child(3) 
 grid-column: 3; /* places it in the third column */


.cell 
 border: 1px solid gray;
 background-color: white;


.cell .inner 
 display: flex;
 justify-content: center;
 align-items: center;
 /* width: 100px; */
 /* height: 100px; */
 height: 100%; /* added */
 text-align: center;

<div class="parent">
 <div class="wrapper">
 <div class="cell">
 <div class="inner">Cell 1</div>
 </div>
 </div>
</div>

<div class="parent">
 <div class="wrapper">
 <div class="cell">
 <div class="inner">Cell 1</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 2</div>
 </div>
 </div>
</div>

<div class="parent">
 <div class="wrapper">
 <div class="cell">
 <div class="inner">Cell 1</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 2</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 3</div>
 </div>
 </div>
</div>

<div class="parent">
 <div class="wrapper">
 <div class="cell">
 <div class="inner">Cell 1</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 2</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 3</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 4</div>
 </div>
 </div>
</div>

<div class="parent">
 <div class="wrapper">
 <div class="cell">
 <div class="inner">Cell 1</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 2</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 3</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 4</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 5</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 6</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 7</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 8</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 9</div>
 </div>
 <div class="cell">
 <div class="inner">Cell 10</div>
 </div>
 </div>
</div>








share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55309569%2fcss-grid-problem-with-background-and-wrapping%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    So you want to make the grid-container auto-sized less that 3 items and wrap after that - here's a solution that uses implicit grids.




    • use a single column inline grid container:



      display: inline-grid;
      grid-template-columns: 100px;
      grid-template-rows: 100px;



    • size your implicit grids as 100px x 100px using:



      grid-auto-columns: 100px;
      grid-auto-rows: 100px;


    • place your second item to the second row using grid-column: 2; and your third item to the third row using grid-column: 3


    Now you will have a 3 x 3 grid - see demo below:






    * 
     box-sizing: border-box;


    .parent 
     background: #f4f4f5;
     font-size: 2em;
     border: 1px solid black;
     padding: 20px 0;
     text-align: center;
     width: 100%;


    .parent .wrapper 
     display: inline-grid;
     grid-template-columns: 100px; /* one column layout */
     grid-template-rows: 100px; /* sizes the rows */
     grid-auto-columns: 100px; /* sizing columns of implicit grid */
     grid-auto-rows: 100px; /* sizing rows of implicit grid */
     box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.75);
     grid-auto-flow: row;
     background-color: white;


    .cell:nth-child(2) 
     grid-column: 2; /* places it in the second column */


    .cell:nth-child(3) 
     grid-column: 3; /* places it in the third column */


    .cell 
     border: 1px solid gray;
     background-color: white;


    .cell .inner 
     display: flex;
     justify-content: center;
     align-items: center;
     /* width: 100px; */
     /* height: 100px; */
     height: 100%; /* added */
     text-align: center;

    <div class="parent">
     <div class="wrapper">
     <div class="cell">
     <div class="inner">Cell 1</div>
     </div>
     </div>
    </div>

    <div class="parent">
     <div class="wrapper">
     <div class="cell">
     <div class="inner">Cell 1</div>
     </div>
     <div class="cell">
     <div class="inner">Cell 2</div>
     </div>
     </div>
    </div>

    <div class="parent">
     <div class="wrapper">
     <div class="cell">
     <div class="inner">Cell 1</div>
     </div>
     <div class="cell">
     <div class="inner">Cell 2</div>
     </div>
     <div class="cell">
     <div class="inner">Cell 3</div>
     </div>
     </div>
    </div>

    <div class="parent">
     <div class="wrapper">
     <div class="cell">
     <div class="inner">Cell 1</div>
     </div>
     <div class="cell">
     <div class="inner">Cell 2</div>
     </div>
     <div class="cell">
     <div class="inner">Cell 3</div>
     </div>
     <div class="cell">
     <div class="inner">Cell 4</div>
     </div>
     </div>
    </div>

    <div class="parent">
     <div class="wrapper">
     <div class="cell">
     <div class="inner">Cell 1</div>
     </div>
     <div class="cell">
     <div class="inner">Cell 2</div>
     </div>
     <div class="cell">
     <div class="inner">Cell 3</div>
     </div>
     <div class="cell">
     <div class="inner">Cell 4</div>
     </div>
     <div class="cell">
     <div class="inner">Cell 5</div>
     </div>
     <div class="cell">
     <div class="inner">Cell 6</div>
     </div>
     <div class="cell">
     <div class="inner">Cell 7</div>
     </div>
     <div class="cell">
     <div class="inner">Cell 8</div>
     </div>
     <div class="cell">
     <div class="inner">Cell 9</div>
     </div>
     <div class="cell">
     <div class="inner">Cell 10</div>
     </div>
     </div>
    </div>








    share|improve this answer



























      0














      So you want to make the grid-container auto-sized less that 3 items and wrap after that - here's a solution that uses implicit grids.




      • use a single column inline grid container:



        display: inline-grid;
        grid-template-columns: 100px;
        grid-template-rows: 100px;



      • size your implicit grids as 100px x 100px using:



        grid-auto-columns: 100px;
        grid-auto-rows: 100px;


      • place your second item to the second row using grid-column: 2; and your third item to the third row using grid-column: 3


      Now you will have a 3 x 3 grid - see demo below:






      * 
       box-sizing: border-box;


      .parent 
       background: #f4f4f5;
       font-size: 2em;
       border: 1px solid black;
       padding: 20px 0;
       text-align: center;
       width: 100%;


      .parent .wrapper 
       display: inline-grid;
       grid-template-columns: 100px; /* one column layout */
       grid-template-rows: 100px; /* sizes the rows */
       grid-auto-columns: 100px; /* sizing columns of implicit grid */
       grid-auto-rows: 100px; /* sizing rows of implicit grid */
       box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.75);
       grid-auto-flow: row;
       background-color: white;


      .cell:nth-child(2) 
       grid-column: 2; /* places it in the second column */


      .cell:nth-child(3) 
       grid-column: 3; /* places it in the third column */


      .cell 
       border: 1px solid gray;
       background-color: white;


      .cell .inner 
       display: flex;
       justify-content: center;
       align-items: center;
       /* width: 100px; */
       /* height: 100px; */
       height: 100%; /* added */
       text-align: center;

      <div class="parent">
       <div class="wrapper">
       <div class="cell">
       <div class="inner">Cell 1</div>
       </div>
       </div>
      </div>

      <div class="parent">
       <div class="wrapper">
       <div class="cell">
       <div class="inner">Cell 1</div>
       </div>
       <div class="cell">
       <div class="inner">Cell 2</div>
       </div>
       </div>
      </div>

      <div class="parent">
       <div class="wrapper">
       <div class="cell">
       <div class="inner">Cell 1</div>
       </div>
       <div class="cell">
       <div class="inner">Cell 2</div>
       </div>
       <div class="cell">
       <div class="inner">Cell 3</div>
       </div>
       </div>
      </div>

      <div class="parent">
       <div class="wrapper">
       <div class="cell">
       <div class="inner">Cell 1</div>
       </div>
       <div class="cell">
       <div class="inner">Cell 2</div>
       </div>
       <div class="cell">
       <div class="inner">Cell 3</div>
       </div>
       <div class="cell">
       <div class="inner">Cell 4</div>
       </div>
       </div>
      </div>

      <div class="parent">
       <div class="wrapper">
       <div class="cell">
       <div class="inner">Cell 1</div>
       </div>
       <div class="cell">
       <div class="inner">Cell 2</div>
       </div>
       <div class="cell">
       <div class="inner">Cell 3</div>
       </div>
       <div class="cell">
       <div class="inner">Cell 4</div>
       </div>
       <div class="cell">
       <div class="inner">Cell 5</div>
       </div>
       <div class="cell">
       <div class="inner">Cell 6</div>
       </div>
       <div class="cell">
       <div class="inner">Cell 7</div>
       </div>
       <div class="cell">
       <div class="inner">Cell 8</div>
       </div>
       <div class="cell">
       <div class="inner">Cell 9</div>
       </div>
       <div class="cell">
       <div class="inner">Cell 10</div>
       </div>
       </div>
      </div>








      share|improve this answer

























        0












        0








        0







        So you want to make the grid-container auto-sized less that 3 items and wrap after that - here's a solution that uses implicit grids.




        • use a single column inline grid container:



          display: inline-grid;
          grid-template-columns: 100px;
          grid-template-rows: 100px;



        • size your implicit grids as 100px x 100px using:



          grid-auto-columns: 100px;
          grid-auto-rows: 100px;


        • place your second item to the second row using grid-column: 2; and your third item to the third row using grid-column: 3


        Now you will have a 3 x 3 grid - see demo below:






        * 
         box-sizing: border-box;


        .parent 
         background: #f4f4f5;
         font-size: 2em;
         border: 1px solid black;
         padding: 20px 0;
         text-align: center;
         width: 100%;


        .parent .wrapper 
         display: inline-grid;
         grid-template-columns: 100px; /* one column layout */
         grid-template-rows: 100px; /* sizes the rows */
         grid-auto-columns: 100px; /* sizing columns of implicit grid */
         grid-auto-rows: 100px; /* sizing rows of implicit grid */
         box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.75);
         grid-auto-flow: row;
         background-color: white;


        .cell:nth-child(2) 
         grid-column: 2; /* places it in the second column */


        .cell:nth-child(3) 
         grid-column: 3; /* places it in the third column */


        .cell 
         border: 1px solid gray;
         background-color: white;


        .cell .inner 
         display: flex;
         justify-content: center;
         align-items: center;
         /* width: 100px; */
         /* height: 100px; */
         height: 100%; /* added */
         text-align: center;

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         </div>
        </div>

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 2</div>
         </div>
         </div>
        </div>

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 2</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 3</div>
         </div>
         </div>
        </div>

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 2</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 3</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 4</div>
         </div>
         </div>
        </div>

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 2</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 3</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 4</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 5</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 6</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 7</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 8</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 9</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 10</div>
         </div>
         </div>
        </div>








        share|improve this answer













        So you want to make the grid-container auto-sized less that 3 items and wrap after that - here's a solution that uses implicit grids.




        • use a single column inline grid container:



          display: inline-grid;
          grid-template-columns: 100px;
          grid-template-rows: 100px;



        • size your implicit grids as 100px x 100px using:



          grid-auto-columns: 100px;
          grid-auto-rows: 100px;


        • place your second item to the second row using grid-column: 2; and your third item to the third row using grid-column: 3


        Now you will have a 3 x 3 grid - see demo below:






        * 
         box-sizing: border-box;


        .parent 
         background: #f4f4f5;
         font-size: 2em;
         border: 1px solid black;
         padding: 20px 0;
         text-align: center;
         width: 100%;


        .parent .wrapper 
         display: inline-grid;
         grid-template-columns: 100px; /* one column layout */
         grid-template-rows: 100px; /* sizes the rows */
         grid-auto-columns: 100px; /* sizing columns of implicit grid */
         grid-auto-rows: 100px; /* sizing rows of implicit grid */
         box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.75);
         grid-auto-flow: row;
         background-color: white;


        .cell:nth-child(2) 
         grid-column: 2; /* places it in the second column */


        .cell:nth-child(3) 
         grid-column: 3; /* places it in the third column */


        .cell 
         border: 1px solid gray;
         background-color: white;


        .cell .inner 
         display: flex;
         justify-content: center;
         align-items: center;
         /* width: 100px; */
         /* height: 100px; */
         height: 100%; /* added */
         text-align: center;

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         </div>
        </div>

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 2</div>
         </div>
         </div>
        </div>

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 2</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 3</div>
         </div>
         </div>
        </div>

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 2</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 3</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 4</div>
         </div>
         </div>
        </div>

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 2</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 3</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 4</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 5</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 6</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 7</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 8</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 9</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 10</div>
         </div>
         </div>
        </div>








        * 
         box-sizing: border-box;


        .parent 
         background: #f4f4f5;
         font-size: 2em;
         border: 1px solid black;
         padding: 20px 0;
         text-align: center;
         width: 100%;


        .parent .wrapper 
         display: inline-grid;
         grid-template-columns: 100px; /* one column layout */
         grid-template-rows: 100px; /* sizes the rows */
         grid-auto-columns: 100px; /* sizing columns of implicit grid */
         grid-auto-rows: 100px; /* sizing rows of implicit grid */
         box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.75);
         grid-auto-flow: row;
         background-color: white;


        .cell:nth-child(2) 
         grid-column: 2; /* places it in the second column */


        .cell:nth-child(3) 
         grid-column: 3; /* places it in the third column */


        .cell 
         border: 1px solid gray;
         background-color: white;


        .cell .inner 
         display: flex;
         justify-content: center;
         align-items: center;
         /* width: 100px; */
         /* height: 100px; */
         height: 100%; /* added */
         text-align: center;

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         </div>
        </div>

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 2</div>
         </div>
         </div>
        </div>

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 2</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 3</div>
         </div>
         </div>
        </div>

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 2</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 3</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 4</div>
         </div>
         </div>
        </div>

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 2</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 3</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 4</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 5</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 6</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 7</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 8</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 9</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 10</div>
         </div>
         </div>
        </div>





        * 
         box-sizing: border-box;


        .parent 
         background: #f4f4f5;
         font-size: 2em;
         border: 1px solid black;
         padding: 20px 0;
         text-align: center;
         width: 100%;


        .parent .wrapper 
         display: inline-grid;
         grid-template-columns: 100px; /* one column layout */
         grid-template-rows: 100px; /* sizes the rows */
         grid-auto-columns: 100px; /* sizing columns of implicit grid */
         grid-auto-rows: 100px; /* sizing rows of implicit grid */
         box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.75);
         grid-auto-flow: row;
         background-color: white;


        .cell:nth-child(2) 
         grid-column: 2; /* places it in the second column */


        .cell:nth-child(3) 
         grid-column: 3; /* places it in the third column */


        .cell 
         border: 1px solid gray;
         background-color: white;


        .cell .inner 
         display: flex;
         justify-content: center;
         align-items: center;
         /* width: 100px; */
         /* height: 100px; */
         height: 100%; /* added */
         text-align: center;

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         </div>
        </div>

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 2</div>
         </div>
         </div>
        </div>

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 2</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 3</div>
         </div>
         </div>
        </div>

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 2</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 3</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 4</div>
         </div>
         </div>
        </div>

        <div class="parent">
         <div class="wrapper">
         <div class="cell">
         <div class="inner">Cell 1</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 2</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 3</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 4</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 5</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 6</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 7</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 8</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 9</div>
         </div>
         <div class="cell">
         <div class="inner">Cell 10</div>
         </div>
         </div>
        </div>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Mar 24 at 13:16









        kukkuzkukkuz

        32.4k62971




        32.4k62971





























            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55309569%2fcss-grid-problem-with-background-and-wrapping%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            SQL error code 1064 with creating Laravel foreign keysForeign key constraints: When to use ON UPDATE and ON DELETEDropping column with foreign key Laravel error: General error: 1025 Error on renameLaravel SQL Can't create tableLaravel Migration foreign key errorLaravel php artisan migrate:refresh giving a syntax errorSQLSTATE[42S01]: Base table or view already exists or Base table or view already exists: 1050 Tableerror in migrating laravel file to xampp serverSyntax error or access violation: 1064:syntax to use near 'unsigned not null, modelName varchar(191) not null, title varchar(191) not nLaravel cannot create new table field in mysqlLaravel 5.7:Last migration creates table but is not registered in the migration table

            Image
            Does a multiclassed wizard start with a spellbook? Minimizing medical costs with HSA Boss has banned cycling to work because he thinks it's unsafe Is there a typical layout to blocking installed for backing in new construction framing? In the Seventh Seal why does Death let the chess game happen? Why has Novell never written its own boot loader? Should I warn my boss I might take sick leave Why is the saxophone not common in classical repertoire? Is it possible to spoof an IP address to an exact number? Motorcyle Chain needs to be cleaned every time you lube it? Bypass with wrong cvv of debit card and getting OTP Do we have a much compact and generalized version of erase–remove idiom? how can i make this execution plan more efficient? Why did moving the mouse cursor cause Windows 95 to run more quickly? What's the big deal about the Nazgûl losing their horses? Has chattel slavery ever been used as a criminal punishment in the USA since the passag...
            Read more

            용인 삼성생명 블루밍스 목차 통계 역대 감독 선수단 응원단 경기장 같이 보기 외부 링크 둘러보기 메뉴samsungblueminx.comeh선수 명단용인 삼성생명 블루밍스용인 삼성생명 블루밍스ehsamsungblueminx.comeheheheh

            Image
            수원 삼성생명 비추미광주 신세계 쿨캣수원 삼성생명 비추미안산 신한은행 에스버드안산 신한은행 에스버드안산 신한은행 에스버드춘천 우리은행 한새춘천 우리은행 한새춘천 우리은행 한새춘천 우리은행 한새아산 우리은행 위비아산 우리은행 위비청주 KB 스타즈 한국 여자 농구 연맹 팀1977년 설립...
            Read more

            155 수학 과학 기타 둘러보기 메뉴eh추가해eh문서를 완성해

            Image
            0123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369...
            Read more