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

            Obelisk of Theodosius Contents History Description Notes Bibliography Further reading External links Navigation menuAge of spirituality : late antique and early Christian art, third to seventh centuryOver 60 picturesObelisks of the World41°00′21.24″N 28°58′31.43″E / 41.0059000°N 28.9753972°E / 41.0059000; 28.97539727724550-7235741376235741376

            Image
            Obelisks in IstanbulAncient Egyptian obelisksRelocated ancient Egyptian monumentsLatin inscriptionsByzantine Greek inscriptionsVictory monumentsHippodrome of Constantinople4th-century Roman sculptures15th-century BC stelesThutmose III TurkishAncient EgyptianobeliskPharaohThutmose IIIHippodromeConstantinopleIstanbulTurkeyRoman emperorTheodosius I18th dynastyThutmose IIIpylontemple of KarnakConstantius IIriver NileAlexandriaCircus MaximusRomeLateran ObeliskTheodosius IAswanLateran Obeliskvictory over the MitanniCorinthianwater organCtesibiusporphyryhexameterselegiaccoupletsByzantine Greek Obelisk of Theodosius From Wikipedia, the free encyclopedia Jump to navigation Jump to search The obelisk of Theodosius I in Istanbul. The Obelisk of Theodosius (Turkish: Dikilitaş ) is the Ancient Egyptian obelisk of Pharaoh Thutmose III re-erected in the Hippodrome of Constantinople (known today as At Meydanı or Sultanahmet Meydanı , in the modern...
            Read more

            밀양 대씨 역사 각주 함께 보기 둘러보기 메뉴밀양 대씨

            Image
            대씨밀양 대씨발해의 왕족발해 한국의 성씨발해대중상고구려대조영고구려발해발해요(遼)나라대광현대인선 밀양 대씨 위키백과, 우리 모두의 백과사전. 둘러보기로 가기 검색하러 가기 밀양 대씨(密陽 大氏) 관향 경상남도 밀양시 시조 대조영(大祚榮) 주요 중시조 대덕세 (大德歲) 인구 (2000...
            Read more

            1973년 목차 사건 문화 탄생 사망 노벨상 달력 둘러보기 메뉴

            Image
            1973년 월요일로 시작하는 평년 1973년 위키백과, 우리 모두의 백과사전. 둘러보기로 가기 검색하러 가기 해 1970년 1971년 1972년 - 1973년 - 1974년 1975년 1976년 연대 1950년대 1960년대 - 1970년대 - 1980년대 1990년대 세기 18세기 19세기 - 20세기 - 21세기 22세기 서기 1973년의 다른 기년법 간지 임자년~계축년 단기 4306년 그레고리력 1973년 MCMLXXIII 불기 2517년 이...
            Read more