CSS grid max columns without media queriesWhat are the areas covered by Flexbox which are difficult or impossible to achieve with Grid?CSS media queries: max-width OR max-heightSelecting a Column in a CSS GridCSS Grid auto-fit + minmax adds phantom rowSetting the minimum, maximum and default length of a grid column / rowCreate a Table with CSS gridGetting to a one-column layout when grid items span multiple columnsCreate a CSS Grid that flows by column, with dynamic columns and rows based on contentSetting minimum and maximum number of columns using CSS GridCan I emulate flex-grow and flex-shrink with CSS Grid layout?How to specify the maximum number of columns repeat() will create using auto-fit/fill?

Cynical novel that describes an America ruled by the media, arms manufacturers, and ethnic figureheads

How will losing mobility of one hand affect my career as a programmer?

MaTeX, font size, and PlotLegends

Implement the Thanos sorting algorithm

Is the destination of a commercial flight important for the pilot?

quarter to five p.m

Can somebody explain Brexit in a few child-proof sentences?

Using parameter substitution on a Bash array

Is there a good way to store credentials outside of a password manager?

Efficiently merge handle parallel feature branches in SFDX

If a character can use a +X magic weapon as a spellcasting focus, does it add the bonus to spell attacks or spell save DCs?

There is only s̶i̶x̶t̶y one place he can be

I'm in charge of equipment buying but no one's ever happy with what I choose. How to fix this?

Is it correct to write "is not focus on"?

At which point does a character regain all their Hit Dice?

Can I convert a rim brake wheel to a disc brake wheel?

Time travel short story where a man arrives in the late 19th century in a time machine and then sends the machine back into the past

What defines a dissertation?

Was the picture area of a CRT a parallelogram (instead of a true rectangle)?

Everything Bob says is false. How does he get people to trust him?

Is there any reason not to eat food that's been dropped on the surface of the moon?

Irreducibility of a simple polynomial

Why Were Madagascar and New Zealand Discovered So Late?

Can I Retrieve Email Addresses from BCC?



CSS grid max columns without media queries


What are the areas covered by Flexbox which are difficult or impossible to achieve with Grid?CSS media queries: max-width OR max-heightSelecting a Column in a CSS GridCSS Grid auto-fit + minmax adds phantom rowSetting the minimum, maximum and default length of a grid column / rowCreate a Table with CSS gridGetting to a one-column layout when grid items span multiple columnsCreate a CSS Grid that flows by column, with dynamic columns and rows based on contentSetting minimum and maximum number of columns using CSS GridCan I emulate flex-grow and flex-shrink with CSS Grid layout?How to specify the maximum number of columns repeat() will create using auto-fit/fill?













9















Is it possible to define a grid with a maximum number of columns but allow elements to wrap onto new rows when the screen width changes?



I have implimented classes that allow rows to wrap onto new rows, but there is no maximum number of columns.



Here is a code pen of one method using flex boxes



CSS:



.flex-container 
 display: flex;
 flex-wrap: wrap;



Another method is to use a grid



.grid 
 display: grid;
 counter-reset: grid-items;
 position: relative;



.grid--auto-fit 
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));



I want a fairly generic solution to this, is what I want to achieve possible without Javascript or media queries?






html css css3 flexbox css-grid







share|improve this question
























  • have you tried : grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); for a four columns max ? or 12.5% for eight an so on ?

    – G-Cyr
    Mar 21 at 14:20















9















Is it possible to define a grid with a maximum number of columns but allow elements to wrap onto new rows when the screen width changes?



I have implimented classes that allow rows to wrap onto new rows, but there is no maximum number of columns.



Here is a code pen of one method using flex boxes



CSS:



.flex-container 
 display: flex;
 flex-wrap: wrap;



Another method is to use a grid



.grid 
 display: grid;
 counter-reset: grid-items;
 position: relative;



.grid--auto-fit 
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));



I want a fairly generic solution to this, is what I want to achieve possible without Javascript or media queries?






html css css3 flexbox css-grid







share|improve this question
























  • have you tried : grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); for a four columns max ? or 12.5% for eight an so on ?

    – G-Cyr
    Mar 21 at 14:20













9












9








9


1






Is it possible to define a grid with a maximum number of columns but allow elements to wrap onto new rows when the screen width changes?



I have implimented classes that allow rows to wrap onto new rows, but there is no maximum number of columns.



Here is a code pen of one method using flex boxes



CSS:



.flex-container 
 display: flex;
 flex-wrap: wrap;



Another method is to use a grid



.grid 
 display: grid;
 counter-reset: grid-items;
 position: relative;



.grid--auto-fit 
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));



I want a fairly generic solution to this, is what I want to achieve possible without Javascript or media queries?






html css css3 flexbox css-grid







share|improve this question
















Is it possible to define a grid with a maximum number of columns but allow elements to wrap onto new rows when the screen width changes?



I have implimented classes that allow rows to wrap onto new rows, but there is no maximum number of columns.



Here is a code pen of one method using flex boxes



CSS:



.flex-container 
 display: flex;
 flex-wrap: wrap;



Another method is to use a grid



.grid 
 display: grid;
 counter-reset: grid-items;
 position: relative;



.grid--auto-fit 
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));



I want a fairly generic solution to this, is what I want to achieve possible without Javascript or media queries?






html css css3 flexbox css-grid




html css css3 flexbox css-grid






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 21 at 15:31









kukkuz

29k62868




29k62868










asked Mar 21 at 13:31









Ben AllenBen Allen

463




463












  • have you tried : grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); for a four columns max ? or 12.5% for eight an so on ?

    – G-Cyr
    Mar 21 at 14:20

















  • have you tried : grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); for a four columns max ? or 12.5% for eight an so on ?

    – G-Cyr
    Mar 21 at 14:20
















have you tried : grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); for a four columns max ? or 12.5% for eight an so on ?

– G-Cyr
Mar 21 at 14:20





have you tried : grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); for a four columns max ? or 12.5% for eight an so on ?

– G-Cyr
Mar 21 at 14:20












2 Answers
2






active

oldest

votes


















2














You can't explicitly do it either for a flexbox or for a CSS grid - but you can use a hack using CSS Variables (usually that's all you need).




CSS Grid Layout

For instance you can set global column number in the :root while a specific column number on the grid wrapper - see a CSS grid below with 4 columns set globally:






:root 
 --columns: 3;


.grid 
 display: grid;
 grid-gap: 10px;
 /* adjusting for the 10px grid-gap as well */
 grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr)); 


.grid > * 
 background-color: green;
 height: 200px;

<div class="grid">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
</div>





Now you can set a rule for the number of columns on the grid container by redeclaring --columns (or you can have JS add a class that contains the --columns declaration) - see demo below:






:root 
 --columns: 3;


.grid 
 display: grid;
 grid-gap: 10px;
 --columns: 4; /* re-define the number of columns */
 grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr));


.grid > * 
 background-color: green;
 height: 200px;

<div class="grid">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
</div>





Flexbox



Similar arguments is valid for flexboxes - see a simplified demo below:






:root 
 --columns: 3;


.flexbox 
 display: flex;
 flex-wrap: wrap;
 --columns: 4; /* re-define the number of columns */


.flexbox > * 
 background-color: green;
 height: 200px;
 margin: 10px;
 flex-basis: calc(100% / var(--columns) - 20px);

<div class="flexbox">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
</div>








share|improve this answer

























  • How compatible is this at the moment? Because it looks quite useful.

    – Mihail Minkov
    Mar 21 at 15:45











  • support is fair - see caniuse.com/#search=var() firefox 31+, chrome 49+

    – kukkuz
    Mar 21 at 15:51











  • So in this case what type of property is --columns. From what I understand you basically convert it into a number using the var() function, but how does it work on the :root element?

    – Mihail Minkov
    Mar 21 at 15:54






  • 1





    they are called CSS variables but they are not in the strict sense - just substitutable properties that you can use... :root represents the html element

    – kukkuz
    Mar 21 at 15:57






  • 1





    Ok, that looks quite useful. :)

    – Mihail Minkov
    Mar 21 at 16:00


















2














With flexbox, you can simply set a max-width to the container since your elements have a fixed width:






.flex-container 
 display: flex;
 flex-wrap: wrap;
 max-width:calc(5*(200px + 20px)); 


.flex-item 
 background: tomato;
 padding: 5px;
 width: 200px;
 height: 100px;
 margin: 10px;
 
 line-height: 100px;
 color: white;
 font-weight: bold;
 font-size: 2em;
 text-align: center;
 box-sizing:border-box;

<div class="flex-container wrap">
 <div class="flex-item">1</div>
 <div class="flex-item">2</div>
 <div class="flex-item">3</div>
 <div class="flex-item">4</div>
 <div class="flex-item">5</div>
 <div class="flex-item">6</div>
 <div class="flex-item">7</div>
 <div class="flex-item">8</div>
</div>





The only drawback is that you need to know the width of your elements and their margin to correctly set the max-width.



If you want your elements to expand and cover all the width, you can use a trick with min-width like below:






.flex-container 
 display: flex;
 flex-wrap: wrap;


.flex-item 
 background: tomato;
 padding: 5px;
 min-width: 200px;
 width:calc(100%/5 - 20px); /*5 columns*/
 height: 100px;
 margin: 10px;
 
 line-height: 100px;
 color: white;
 font-weight: bold;
 font-size: 2em;
 text-align: center;
 box-sizing:border-box;

<div class="flex-container wrap">
 <div class="flex-item">1</div>
 <div class="flex-item">2</div>
 <div class="flex-item">3</div>
 <div class="flex-item">4</div>
 <div class="flex-item">5</div>
 <div class="flex-item">6</div>
 <div class="flex-item">7</div>
 <div class="flex-item">8</div>
</div>





Here also you need to consider the margin, You can easily make this more flexible using CSS variable:






.flex-container 
 display: flex;
 flex-wrap: wrap;


.flex-item 
 --m:10px;
 background: tomato;
 padding: 5px;
 min-width: 200px;
 width:calc(100%/5 - 2*var(--m)); /*5 columns*/
 height: 100px;
 margin: var(--m);
 
 line-height: 100px;
 color: white;
 font-weight: bold;
 font-size: 2em;
 text-align: center;
 box-sizing:border-box;

<div class="flex-container wrap">
 <div class="flex-item">1</div>
 <div class="flex-item">2</div>
 <div class="flex-item">3</div>
 <div class="flex-item">4</div>
 <div class="flex-item">5</div>
 <div class="flex-item">6</div>
 <div class="flex-item">7</div>
 <div class="flex-item">8</div>
</div>





You can also consider flex-grow if you want your element to always expand (even when there is a wrap) but you may face the issue of the last row that you need to fix with some hacks:






.flex-container 
 display: flex;
 flex-wrap: wrap;
 --m:10px;


.flex-item 
 background: tomato;
 padding: 5px;
 min-width: 200px;
 flex-grow:1;
 width:calc(100%/5 - 2*var(--m)); /*5 columns*/
 height: 100px;
 margin: var(--m);
 
 line-height: 100px;
 color: white;
 font-weight: bold;
 font-size: 2em;
 text-align: center;
 box-sizing:border-box;


.flex-container span 
 min-width: 200px;
 flex-grow:1;
 width:calc(100%/5 - 2*var(--m)); /*5 columns*/
 margin:0 var(--m);

<div class="flex-container wrap">
 <div class="flex-item">1</div>
 <div class="flex-item">2</div>
 <div class="flex-item">3</div>
 <div class="flex-item">4</div>
 <div class="flex-item">5</div>
 <div class="flex-item">6</div>
 <div class="flex-item">7</div>
 <div class="flex-item">8</div>
 
 <!-- 4 empty elements to fix the issue (we can also use pseudo element) -->
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>





In the example below we made the number of columns to be 5 so we will need at least 4 empty element to fix the issue in case we will have one to 4 elements in the last row. Of course, this is a drawback but since you know the number of columns you can easily set those empty elements and you won't need any JS.



To make it more flexible, here is an idea with CSS variables:






.flex-container 
 display: flex;
 flex-wrap: wrap;
 border:1px solid;
 --m:10px;
 --n:5;
 --width:150px;


.flex-item 
 background: tomato;
 min-width: var(--width);
 flex-grow:1;
 width:calc(100%/var(--n) - 2*var(--m));
 height: 50px;
 margin: var(--m);
 
 box-sizing:border-box;


.flex-container span 
 display:contents; /* each span will give us 2 elements*/

.flex-container span:before,
.flex-container span:after,
.flex-container:before,
.flex-container:after
 content:"";
 min-width: var(--width);
 flex-grow:1;
 width:calc(100%/var(--n) - 2*var(--m));
 margin:0 var(--m);
 order:1; /*we make sure they are at the end*/

<div class="flex-container wrap">
 <div class="flex-item">1</div>
 <div class="flex-item">2</div>
 <div class="flex-item">3</div>
 <div class="flex-item">4</div>
 <div class="flex-item">5</div>
 <div class="flex-item">6</div>
 <div class="flex-item">7</div>
 <div class="flex-item">8</div>
 
 <!-- a lot of elements !! -->
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

<div class="flex-container wrap" style="--n:10">
 <div class="flex-item">1</div>
 <div class="flex-item">2</div>
 <div class="flex-item">3</div>
 <div class="flex-item">4</div>
 <div class="flex-item">5</div>
 <div class="flex-item">6</div>
 <div class="flex-item">7</div>
 <div class="flex-item">8</div>
 
 <!-- a lot of elements !! -->
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

<div class="flex-container wrap" style="--n:3">
 <div class="flex-item">1</div>
 <div class="flex-item">2</div>
 <div class="flex-item">3</div>
 <div class="flex-item">4</div>
 <div class="flex-item">5</div>
 <div class="flex-item">6</div>
 <div class="flex-item">7</div>
 <div class="flex-item">8</div>
 
 <!-- a lot of elements !! -->
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>





I used display:contents to be able to set N empty elements that will later be considered as 2*N which can reduce the code.



If you will have 7 columns, we will only need 6 extra elements. We can use the two pseudo elements then only 2 empty element to cover the remaining 4.






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%2f55281598%2fcss-grid-max-columns-without-media-queries%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    2














    You can't explicitly do it either for a flexbox or for a CSS grid - but you can use a hack using CSS Variables (usually that's all you need).




    CSS Grid Layout

    For instance you can set global column number in the :root while a specific column number on the grid wrapper - see a CSS grid below with 4 columns set globally:






    :root 
     --columns: 3;


    .grid 
     display: grid;
     grid-gap: 10px;
     /* adjusting for the 10px grid-gap as well */
     grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr)); 


    .grid > * 
     background-color: green;
     height: 200px;

    <div class="grid">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>





    Now you can set a rule for the number of columns on the grid container by redeclaring --columns (or you can have JS add a class that contains the --columns declaration) - see demo below:






    :root 
     --columns: 3;


    .grid 
     display: grid;
     grid-gap: 10px;
     --columns: 4; /* re-define the number of columns */
     grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr));


    .grid > * 
     background-color: green;
     height: 200px;

    <div class="grid">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>





    Flexbox



    Similar arguments is valid for flexboxes - see a simplified demo below:






    :root 
     --columns: 3;


    .flexbox 
     display: flex;
     flex-wrap: wrap;
     --columns: 4; /* re-define the number of columns */


    .flexbox > * 
     background-color: green;
     height: 200px;
     margin: 10px;
     flex-basis: calc(100% / var(--columns) - 20px);

    <div class="flexbox">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>








    share|improve this answer

























    • How compatible is this at the moment? Because it looks quite useful.

      – Mihail Minkov
      Mar 21 at 15:45











    • support is fair - see caniuse.com/#search=var() firefox 31+, chrome 49+

      – kukkuz
      Mar 21 at 15:51











    • So in this case what type of property is --columns. From what I understand you basically convert it into a number using the var() function, but how does it work on the :root element?

      – Mihail Minkov
      Mar 21 at 15:54






    • 1





      they are called CSS variables but they are not in the strict sense - just substitutable properties that you can use... :root represents the html element

      – kukkuz
      Mar 21 at 15:57






    • 1





      Ok, that looks quite useful. :)

      – Mihail Minkov
      Mar 21 at 16:00















    2














    You can't explicitly do it either for a flexbox or for a CSS grid - but you can use a hack using CSS Variables (usually that's all you need).




    CSS Grid Layout

    For instance you can set global column number in the :root while a specific column number on the grid wrapper - see a CSS grid below with 4 columns set globally:






    :root 
     --columns: 3;


    .grid 
     display: grid;
     grid-gap: 10px;
     /* adjusting for the 10px grid-gap as well */
     grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr)); 


    .grid > * 
     background-color: green;
     height: 200px;

    <div class="grid">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>





    Now you can set a rule for the number of columns on the grid container by redeclaring --columns (or you can have JS add a class that contains the --columns declaration) - see demo below:






    :root 
     --columns: 3;


    .grid 
     display: grid;
     grid-gap: 10px;
     --columns: 4; /* re-define the number of columns */
     grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr));


    .grid > * 
     background-color: green;
     height: 200px;

    <div class="grid">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>





    Flexbox



    Similar arguments is valid for flexboxes - see a simplified demo below:






    :root 
     --columns: 3;


    .flexbox 
     display: flex;
     flex-wrap: wrap;
     --columns: 4; /* re-define the number of columns */


    .flexbox > * 
     background-color: green;
     height: 200px;
     margin: 10px;
     flex-basis: calc(100% / var(--columns) - 20px);

    <div class="flexbox">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>








    share|improve this answer

























    • How compatible is this at the moment? Because it looks quite useful.

      – Mihail Minkov
      Mar 21 at 15:45











    • support is fair - see caniuse.com/#search=var() firefox 31+, chrome 49+

      – kukkuz
      Mar 21 at 15:51











    • So in this case what type of property is --columns. From what I understand you basically convert it into a number using the var() function, but how does it work on the :root element?

      – Mihail Minkov
      Mar 21 at 15:54






    • 1





      they are called CSS variables but they are not in the strict sense - just substitutable properties that you can use... :root represents the html element

      – kukkuz
      Mar 21 at 15:57






    • 1





      Ok, that looks quite useful. :)

      – Mihail Minkov
      Mar 21 at 16:00













    2












    2








    2







    You can't explicitly do it either for a flexbox or for a CSS grid - but you can use a hack using CSS Variables (usually that's all you need).




    CSS Grid Layout

    For instance you can set global column number in the :root while a specific column number on the grid wrapper - see a CSS grid below with 4 columns set globally:






    :root 
     --columns: 3;


    .grid 
     display: grid;
     grid-gap: 10px;
     /* adjusting for the 10px grid-gap as well */
     grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr)); 


    .grid > * 
     background-color: green;
     height: 200px;

    <div class="grid">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>





    Now you can set a rule for the number of columns on the grid container by redeclaring --columns (or you can have JS add a class that contains the --columns declaration) - see demo below:






    :root 
     --columns: 3;


    .grid 
     display: grid;
     grid-gap: 10px;
     --columns: 4; /* re-define the number of columns */
     grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr));


    .grid > * 
     background-color: green;
     height: 200px;

    <div class="grid">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>





    Flexbox



    Similar arguments is valid for flexboxes - see a simplified demo below:






    :root 
     --columns: 3;


    .flexbox 
     display: flex;
     flex-wrap: wrap;
     --columns: 4; /* re-define the number of columns */


    .flexbox > * 
     background-color: green;
     height: 200px;
     margin: 10px;
     flex-basis: calc(100% / var(--columns) - 20px);

    <div class="flexbox">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>








    share|improve this answer















    You can't explicitly do it either for a flexbox or for a CSS grid - but you can use a hack using CSS Variables (usually that's all you need).




    CSS Grid Layout

    For instance you can set global column number in the :root while a specific column number on the grid wrapper - see a CSS grid below with 4 columns set globally:






    :root 
     --columns: 3;


    .grid 
     display: grid;
     grid-gap: 10px;
     /* adjusting for the 10px grid-gap as well */
     grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr)); 


    .grid > * 
     background-color: green;
     height: 200px;

    <div class="grid">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>





    Now you can set a rule for the number of columns on the grid container by redeclaring --columns (or you can have JS add a class that contains the --columns declaration) - see demo below:






    :root 
     --columns: 3;


    .grid 
     display: grid;
     grid-gap: 10px;
     --columns: 4; /* re-define the number of columns */
     grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr));


    .grid > * 
     background-color: green;
     height: 200px;

    <div class="grid">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>





    Flexbox



    Similar arguments is valid for flexboxes - see a simplified demo below:






    :root 
     --columns: 3;


    .flexbox 
     display: flex;
     flex-wrap: wrap;
     --columns: 4; /* re-define the number of columns */


    .flexbox > * 
     background-color: green;
     height: 200px;
     margin: 10px;
     flex-basis: calc(100% / var(--columns) - 20px);

    <div class="flexbox">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>








    :root 
     --columns: 3;


    .grid 
     display: grid;
     grid-gap: 10px;
     /* adjusting for the 10px grid-gap as well */
     grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr)); 


    .grid > * 
     background-color: green;
     height: 200px;

    <div class="grid">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>





    :root 
     --columns: 3;


    .grid 
     display: grid;
     grid-gap: 10px;
     /* adjusting for the 10px grid-gap as well */
     grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr)); 


    .grid > * 
     background-color: green;
     height: 200px;

    <div class="grid">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>





    :root 
     --columns: 3;


    .grid 
     display: grid;
     grid-gap: 10px;
     --columns: 4; /* re-define the number of columns */
     grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr));


    .grid > * 
     background-color: green;
     height: 200px;

    <div class="grid">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>





    :root 
     --columns: 3;


    .grid 
     display: grid;
     grid-gap: 10px;
     --columns: 4; /* re-define the number of columns */
     grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr));


    .grid > * 
     background-color: green;
     height: 200px;

    <div class="grid">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>





    :root 
     --columns: 3;


    .flexbox 
     display: flex;
     flex-wrap: wrap;
     --columns: 4; /* re-define the number of columns */


    .flexbox > * 
     background-color: green;
     height: 200px;
     margin: 10px;
     flex-basis: calc(100% / var(--columns) - 20px);

    <div class="flexbox">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>





    :root 
     --columns: 3;


    .flexbox 
     display: flex;
     flex-wrap: wrap;
     --columns: 4; /* re-define the number of columns */


    .flexbox > * 
     background-color: green;
     height: 200px;
     margin: 10px;
     flex-basis: calc(100% / var(--columns) - 20px);

    <div class="flexbox">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
    </div>






    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Mar 21 at 15:44

























    answered Mar 21 at 15:25









    kukkuzkukkuz

    29k62868




    29k62868












    • How compatible is this at the moment? Because it looks quite useful.

      – Mihail Minkov
      Mar 21 at 15:45











    • support is fair - see caniuse.com/#search=var() firefox 31+, chrome 49+

      – kukkuz
      Mar 21 at 15:51











    • So in this case what type of property is --columns. From what I understand you basically convert it into a number using the var() function, but how does it work on the :root element?

      – Mihail Minkov
      Mar 21 at 15:54






    • 1





      they are called CSS variables but they are not in the strict sense - just substitutable properties that you can use... :root represents the html element

      – kukkuz
      Mar 21 at 15:57






    • 1





      Ok, that looks quite useful. :)

      – Mihail Minkov
      Mar 21 at 16:00

















    • How compatible is this at the moment? Because it looks quite useful.

      – Mihail Minkov
      Mar 21 at 15:45











    • support is fair - see caniuse.com/#search=var() firefox 31+, chrome 49+

      – kukkuz
      Mar 21 at 15:51











    • So in this case what type of property is --columns. From what I understand you basically convert it into a number using the var() function, but how does it work on the :root element?

      – Mihail Minkov
      Mar 21 at 15:54






    • 1





      they are called CSS variables but they are not in the strict sense - just substitutable properties that you can use... :root represents the html element

      – kukkuz
      Mar 21 at 15:57






    • 1





      Ok, that looks quite useful. :)

      – Mihail Minkov
      Mar 21 at 16:00
















    How compatible is this at the moment? Because it looks quite useful.

    – Mihail Minkov
    Mar 21 at 15:45





    How compatible is this at the moment? Because it looks quite useful.

    – Mihail Minkov
    Mar 21 at 15:45













    support is fair - see caniuse.com/#search=var() firefox 31+, chrome 49+

    – kukkuz
    Mar 21 at 15:51





    support is fair - see caniuse.com/#search=var() firefox 31+, chrome 49+

    – kukkuz
    Mar 21 at 15:51













    So in this case what type of property is --columns. From what I understand you basically convert it into a number using the var() function, but how does it work on the :root element?

    – Mihail Minkov
    Mar 21 at 15:54





    So in this case what type of property is --columns. From what I understand you basically convert it into a number using the var() function, but how does it work on the :root element?

    – Mihail Minkov
    Mar 21 at 15:54




    1




    1





    they are called CSS variables but they are not in the strict sense - just substitutable properties that you can use... :root represents the html element

    – kukkuz
    Mar 21 at 15:57





    they are called CSS variables but they are not in the strict sense - just substitutable properties that you can use... :root represents the html element

    – kukkuz
    Mar 21 at 15:57




    1




    1





    Ok, that looks quite useful. :)

    – Mihail Minkov
    Mar 21 at 16:00





    Ok, that looks quite useful. :)

    – Mihail Minkov
    Mar 21 at 16:00













    2














    With flexbox, you can simply set a max-width to the container since your elements have a fixed width:






    .flex-container 
     display: flex;
     flex-wrap: wrap;
     max-width:calc(5*(200px + 20px)); 


    .flex-item 
     background: tomato;
     padding: 5px;
     width: 200px;
     height: 100px;
     margin: 10px;
     
     line-height: 100px;
     color: white;
     font-weight: bold;
     font-size: 2em;
     text-align: center;
     box-sizing:border-box;

    <div class="flex-container wrap">
     <div class="flex-item">1</div>
     <div class="flex-item">2</div>
     <div class="flex-item">3</div>
     <div class="flex-item">4</div>
     <div class="flex-item">5</div>
     <div class="flex-item">6</div>
     <div class="flex-item">7</div>
     <div class="flex-item">8</div>
    </div>





    The only drawback is that you need to know the width of your elements and their margin to correctly set the max-width.



    If you want your elements to expand and cover all the width, you can use a trick with min-width like below:






    .flex-container 
     display: flex;
     flex-wrap: wrap;


    .flex-item 
     background: tomato;
     padding: 5px;
     min-width: 200px;
     width:calc(100%/5 - 20px); /*5 columns*/
     height: 100px;
     margin: 10px;
     
     line-height: 100px;
     color: white;
     font-weight: bold;
     font-size: 2em;
     text-align: center;
     box-sizing:border-box;

    <div class="flex-container wrap">
     <div class="flex-item">1</div>
     <div class="flex-item">2</div>
     <div class="flex-item">3</div>
     <div class="flex-item">4</div>
     <div class="flex-item">5</div>
     <div class="flex-item">6</div>
     <div class="flex-item">7</div>
     <div class="flex-item">8</div>
    </div>





    Here also you need to consider the margin, You can easily make this more flexible using CSS variable:






    .flex-container 
     display: flex;
     flex-wrap: wrap;


    .flex-item 
     --m:10px;
     background: tomato;
     padding: 5px;
     min-width: 200px;
     width:calc(100%/5 - 2*var(--m)); /*5 columns*/
     height: 100px;
     margin: var(--m);
     
     line-height: 100px;
     color: white;
     font-weight: bold;
     font-size: 2em;
     text-align: center;
     box-sizing:border-box;

    <div class="flex-container wrap">
     <div class="flex-item">1</div>
     <div class="flex-item">2</div>
     <div class="flex-item">3</div>
     <div class="flex-item">4</div>
     <div class="flex-item">5</div>
     <div class="flex-item">6</div>
     <div class="flex-item">7</div>
     <div class="flex-item">8</div>
    </div>





    You can also consider flex-grow if you want your element to always expand (even when there is a wrap) but you may face the issue of the last row that you need to fix with some hacks:






    .flex-container 
     display: flex;
     flex-wrap: wrap;
     --m:10px;


    .flex-item 
     background: tomato;
     padding: 5px;
     min-width: 200px;
     flex-grow:1;
     width:calc(100%/5 - 2*var(--m)); /*5 columns*/
     height: 100px;
     margin: var(--m);
     
     line-height: 100px;
     color: white;
     font-weight: bold;
     font-size: 2em;
     text-align: center;
     box-sizing:border-box;


    .flex-container span 
     min-width: 200px;
     flex-grow:1;
     width:calc(100%/5 - 2*var(--m)); /*5 columns*/
     margin:0 var(--m);

    <div class="flex-container wrap">
     <div class="flex-item">1</div>
     <div class="flex-item">2</div>
     <div class="flex-item">3</div>
     <div class="flex-item">4</div>
     <div class="flex-item">5</div>
     <div class="flex-item">6</div>
     <div class="flex-item">7</div>
     <div class="flex-item">8</div>
     
     <!-- 4 empty elements to fix the issue (we can also use pseudo element) -->
     <span></span>
     <span></span>
     <span></span>
     <span></span>
    </div>





    In the example below we made the number of columns to be 5 so we will need at least 4 empty element to fix the issue in case we will have one to 4 elements in the last row. Of course, this is a drawback but since you know the number of columns you can easily set those empty elements and you won't need any JS.



    To make it more flexible, here is an idea with CSS variables:






    .flex-container 
     display: flex;
     flex-wrap: wrap;
     border:1px solid;
     --m:10px;
     --n:5;
     --width:150px;


    .flex-item 
     background: tomato;
     min-width: var(--width);
     flex-grow:1;
     width:calc(100%/var(--n) - 2*var(--m));
     height: 50px;
     margin: var(--m);
     
     box-sizing:border-box;


    .flex-container span 
     display:contents; /* each span will give us 2 elements*/

    .flex-container span:before,
    .flex-container span:after,
    .flex-container:before,
    .flex-container:after
     content:"";
     min-width: var(--width);
     flex-grow:1;
     width:calc(100%/var(--n) - 2*var(--m));
     margin:0 var(--m);
     order:1; /*we make sure they are at the end*/

    <div class="flex-container wrap">
     <div class="flex-item">1</div>
     <div class="flex-item">2</div>
     <div class="flex-item">3</div>
     <div class="flex-item">4</div>
     <div class="flex-item">5</div>
     <div class="flex-item">6</div>
     <div class="flex-item">7</div>
     <div class="flex-item">8</div>
     
     <!-- a lot of elements !! -->
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
    </div>

    <div class="flex-container wrap" style="--n:10">
     <div class="flex-item">1</div>
     <div class="flex-item">2</div>
     <div class="flex-item">3</div>
     <div class="flex-item">4</div>
     <div class="flex-item">5</div>
     <div class="flex-item">6</div>
     <div class="flex-item">7</div>
     <div class="flex-item">8</div>
     
     <!-- a lot of elements !! -->
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
    </div>

    <div class="flex-container wrap" style="--n:3">
     <div class="flex-item">1</div>
     <div class="flex-item">2</div>
     <div class="flex-item">3</div>
     <div class="flex-item">4</div>
     <div class="flex-item">5</div>
     <div class="flex-item">6</div>
     <div class="flex-item">7</div>
     <div class="flex-item">8</div>
     
     <!-- a lot of elements !! -->
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
    </div>





    I used display:contents to be able to set N empty elements that will later be considered as 2*N which can reduce the code.



    If you will have 7 columns, we will only need 6 extra elements. We can use the two pseudo elements then only 2 empty element to cover the remaining 4.






    share|improve this answer





























      2














      With flexbox, you can simply set a max-width to the container since your elements have a fixed width:






      .flex-container 
       display: flex;
       flex-wrap: wrap;
       max-width:calc(5*(200px + 20px)); 


      .flex-item 
       background: tomato;
       padding: 5px;
       width: 200px;
       height: 100px;
       margin: 10px;
       
       line-height: 100px;
       color: white;
       font-weight: bold;
       font-size: 2em;
       text-align: center;
       box-sizing:border-box;

      <div class="flex-container wrap">
       <div class="flex-item">1</div>
       <div class="flex-item">2</div>
       <div class="flex-item">3</div>
       <div class="flex-item">4</div>
       <div class="flex-item">5</div>
       <div class="flex-item">6</div>
       <div class="flex-item">7</div>
       <div class="flex-item">8</div>
      </div>





      The only drawback is that you need to know the width of your elements and their margin to correctly set the max-width.



      If you want your elements to expand and cover all the width, you can use a trick with min-width like below:






      .flex-container 
       display: flex;
       flex-wrap: wrap;


      .flex-item 
       background: tomato;
       padding: 5px;
       min-width: 200px;
       width:calc(100%/5 - 20px); /*5 columns*/
       height: 100px;
       margin: 10px;
       
       line-height: 100px;
       color: white;
       font-weight: bold;
       font-size: 2em;
       text-align: center;
       box-sizing:border-box;

      <div class="flex-container wrap">
       <div class="flex-item">1</div>
       <div class="flex-item">2</div>
       <div class="flex-item">3</div>
       <div class="flex-item">4</div>
       <div class="flex-item">5</div>
       <div class="flex-item">6</div>
       <div class="flex-item">7</div>
       <div class="flex-item">8</div>
      </div>





      Here also you need to consider the margin, You can easily make this more flexible using CSS variable:






      .flex-container 
       display: flex;
       flex-wrap: wrap;


      .flex-item 
       --m:10px;
       background: tomato;
       padding: 5px;
       min-width: 200px;
       width:calc(100%/5 - 2*var(--m)); /*5 columns*/
       height: 100px;
       margin: var(--m);
       
       line-height: 100px;
       color: white;
       font-weight: bold;
       font-size: 2em;
       text-align: center;
       box-sizing:border-box;

      <div class="flex-container wrap">
       <div class="flex-item">1</div>
       <div class="flex-item">2</div>
       <div class="flex-item">3</div>
       <div class="flex-item">4</div>
       <div class="flex-item">5</div>
       <div class="flex-item">6</div>
       <div class="flex-item">7</div>
       <div class="flex-item">8</div>
      </div>





      You can also consider flex-grow if you want your element to always expand (even when there is a wrap) but you may face the issue of the last row that you need to fix with some hacks:






      .flex-container 
       display: flex;
       flex-wrap: wrap;
       --m:10px;


      .flex-item 
       background: tomato;
       padding: 5px;
       min-width: 200px;
       flex-grow:1;
       width:calc(100%/5 - 2*var(--m)); /*5 columns*/
       height: 100px;
       margin: var(--m);
       
       line-height: 100px;
       color: white;
       font-weight: bold;
       font-size: 2em;
       text-align: center;
       box-sizing:border-box;


      .flex-container span 
       min-width: 200px;
       flex-grow:1;
       width:calc(100%/5 - 2*var(--m)); /*5 columns*/
       margin:0 var(--m);

      <div class="flex-container wrap">
       <div class="flex-item">1</div>
       <div class="flex-item">2</div>
       <div class="flex-item">3</div>
       <div class="flex-item">4</div>
       <div class="flex-item">5</div>
       <div class="flex-item">6</div>
       <div class="flex-item">7</div>
       <div class="flex-item">8</div>
       
       <!-- 4 empty elements to fix the issue (we can also use pseudo element) -->
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>





      In the example below we made the number of columns to be 5 so we will need at least 4 empty element to fix the issue in case we will have one to 4 elements in the last row. Of course, this is a drawback but since you know the number of columns you can easily set those empty elements and you won't need any JS.



      To make it more flexible, here is an idea with CSS variables:






      .flex-container 
       display: flex;
       flex-wrap: wrap;
       border:1px solid;
       --m:10px;
       --n:5;
       --width:150px;


      .flex-item 
       background: tomato;
       min-width: var(--width);
       flex-grow:1;
       width:calc(100%/var(--n) - 2*var(--m));
       height: 50px;
       margin: var(--m);
       
       box-sizing:border-box;


      .flex-container span 
       display:contents; /* each span will give us 2 elements*/

      .flex-container span:before,
      .flex-container span:after,
      .flex-container:before,
      .flex-container:after
       content:"";
       min-width: var(--width);
       flex-grow:1;
       width:calc(100%/var(--n) - 2*var(--m));
       margin:0 var(--m);
       order:1; /*we make sure they are at the end*/

      <div class="flex-container wrap">
       <div class="flex-item">1</div>
       <div class="flex-item">2</div>
       <div class="flex-item">3</div>
       <div class="flex-item">4</div>
       <div class="flex-item">5</div>
       <div class="flex-item">6</div>
       <div class="flex-item">7</div>
       <div class="flex-item">8</div>
       
       <!-- a lot of elements !! -->
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>

      <div class="flex-container wrap" style="--n:10">
       <div class="flex-item">1</div>
       <div class="flex-item">2</div>
       <div class="flex-item">3</div>
       <div class="flex-item">4</div>
       <div class="flex-item">5</div>
       <div class="flex-item">6</div>
       <div class="flex-item">7</div>
       <div class="flex-item">8</div>
       
       <!-- a lot of elements !! -->
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>

      <div class="flex-container wrap" style="--n:3">
       <div class="flex-item">1</div>
       <div class="flex-item">2</div>
       <div class="flex-item">3</div>
       <div class="flex-item">4</div>
       <div class="flex-item">5</div>
       <div class="flex-item">6</div>
       <div class="flex-item">7</div>
       <div class="flex-item">8</div>
       
       <!-- a lot of elements !! -->
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>





      I used display:contents to be able to set N empty elements that will later be considered as 2*N which can reduce the code.



      If you will have 7 columns, we will only need 6 extra elements. We can use the two pseudo elements then only 2 empty element to cover the remaining 4.






      share|improve this answer



























        2












        2








        2







        With flexbox, you can simply set a max-width to the container since your elements have a fixed width:






        .flex-container 
         display: flex;
         flex-wrap: wrap;
         max-width:calc(5*(200px + 20px)); 


        .flex-item 
         background: tomato;
         padding: 5px;
         width: 200px;
         height: 100px;
         margin: 10px;
         
         line-height: 100px;
         color: white;
         font-weight: bold;
         font-size: 2em;
         text-align: center;
         box-sizing:border-box;

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
        </div>





        The only drawback is that you need to know the width of your elements and their margin to correctly set the max-width.



        If you want your elements to expand and cover all the width, you can use a trick with min-width like below:






        .flex-container 
         display: flex;
         flex-wrap: wrap;


        .flex-item 
         background: tomato;
         padding: 5px;
         min-width: 200px;
         width:calc(100%/5 - 20px); /*5 columns*/
         height: 100px;
         margin: 10px;
         
         line-height: 100px;
         color: white;
         font-weight: bold;
         font-size: 2em;
         text-align: center;
         box-sizing:border-box;

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
        </div>





        Here also you need to consider the margin, You can easily make this more flexible using CSS variable:






        .flex-container 
         display: flex;
         flex-wrap: wrap;


        .flex-item 
         --m:10px;
         background: tomato;
         padding: 5px;
         min-width: 200px;
         width:calc(100%/5 - 2*var(--m)); /*5 columns*/
         height: 100px;
         margin: var(--m);
         
         line-height: 100px;
         color: white;
         font-weight: bold;
         font-size: 2em;
         text-align: center;
         box-sizing:border-box;

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
        </div>





        You can also consider flex-grow if you want your element to always expand (even when there is a wrap) but you may face the issue of the last row that you need to fix with some hacks:






        .flex-container 
         display: flex;
         flex-wrap: wrap;
         --m:10px;


        .flex-item 
         background: tomato;
         padding: 5px;
         min-width: 200px;
         flex-grow:1;
         width:calc(100%/5 - 2*var(--m)); /*5 columns*/
         height: 100px;
         margin: var(--m);
         
         line-height: 100px;
         color: white;
         font-weight: bold;
         font-size: 2em;
         text-align: center;
         box-sizing:border-box;


        .flex-container span 
         min-width: 200px;
         flex-grow:1;
         width:calc(100%/5 - 2*var(--m)); /*5 columns*/
         margin:0 var(--m);

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
         
         <!-- 4 empty elements to fix the issue (we can also use pseudo element) -->
         <span></span>
         <span></span>
         <span></span>
         <span></span>
        </div>





        In the example below we made the number of columns to be 5 so we will need at least 4 empty element to fix the issue in case we will have one to 4 elements in the last row. Of course, this is a drawback but since you know the number of columns you can easily set those empty elements and you won't need any JS.



        To make it more flexible, here is an idea with CSS variables:






        .flex-container 
         display: flex;
         flex-wrap: wrap;
         border:1px solid;
         --m:10px;
         --n:5;
         --width:150px;


        .flex-item 
         background: tomato;
         min-width: var(--width);
         flex-grow:1;
         width:calc(100%/var(--n) - 2*var(--m));
         height: 50px;
         margin: var(--m);
         
         box-sizing:border-box;


        .flex-container span 
         display:contents; /* each span will give us 2 elements*/

        .flex-container span:before,
        .flex-container span:after,
        .flex-container:before,
        .flex-container:after
         content:"";
         min-width: var(--width);
         flex-grow:1;
         width:calc(100%/var(--n) - 2*var(--m));
         margin:0 var(--m);
         order:1; /*we make sure they are at the end*/

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
         
         <!-- a lot of elements !! -->
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
        </div>

        <div class="flex-container wrap" style="--n:10">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
         
         <!-- a lot of elements !! -->
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
        </div>

        <div class="flex-container wrap" style="--n:3">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
         
         <!-- a lot of elements !! -->
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
        </div>





        I used display:contents to be able to set N empty elements that will later be considered as 2*N which can reduce the code.



        If you will have 7 columns, we will only need 6 extra elements. We can use the two pseudo elements then only 2 empty element to cover the remaining 4.






        share|improve this answer















        With flexbox, you can simply set a max-width to the container since your elements have a fixed width:






        .flex-container 
         display: flex;
         flex-wrap: wrap;
         max-width:calc(5*(200px + 20px)); 


        .flex-item 
         background: tomato;
         padding: 5px;
         width: 200px;
         height: 100px;
         margin: 10px;
         
         line-height: 100px;
         color: white;
         font-weight: bold;
         font-size: 2em;
         text-align: center;
         box-sizing:border-box;

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
        </div>





        The only drawback is that you need to know the width of your elements and their margin to correctly set the max-width.



        If you want your elements to expand and cover all the width, you can use a trick with min-width like below:






        .flex-container 
         display: flex;
         flex-wrap: wrap;


        .flex-item 
         background: tomato;
         padding: 5px;
         min-width: 200px;
         width:calc(100%/5 - 20px); /*5 columns*/
         height: 100px;
         margin: 10px;
         
         line-height: 100px;
         color: white;
         font-weight: bold;
         font-size: 2em;
         text-align: center;
         box-sizing:border-box;

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
        </div>





        Here also you need to consider the margin, You can easily make this more flexible using CSS variable:






        .flex-container 
         display: flex;
         flex-wrap: wrap;


        .flex-item 
         --m:10px;
         background: tomato;
         padding: 5px;
         min-width: 200px;
         width:calc(100%/5 - 2*var(--m)); /*5 columns*/
         height: 100px;
         margin: var(--m);
         
         line-height: 100px;
         color: white;
         font-weight: bold;
         font-size: 2em;
         text-align: center;
         box-sizing:border-box;

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
        </div>





        You can also consider flex-grow if you want your element to always expand (even when there is a wrap) but you may face the issue of the last row that you need to fix with some hacks:






        .flex-container 
         display: flex;
         flex-wrap: wrap;
         --m:10px;


        .flex-item 
         background: tomato;
         padding: 5px;
         min-width: 200px;
         flex-grow:1;
         width:calc(100%/5 - 2*var(--m)); /*5 columns*/
         height: 100px;
         margin: var(--m);
         
         line-height: 100px;
         color: white;
         font-weight: bold;
         font-size: 2em;
         text-align: center;
         box-sizing:border-box;


        .flex-container span 
         min-width: 200px;
         flex-grow:1;
         width:calc(100%/5 - 2*var(--m)); /*5 columns*/
         margin:0 var(--m);

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
         
         <!-- 4 empty elements to fix the issue (we can also use pseudo element) -->
         <span></span>
         <span></span>
         <span></span>
         <span></span>
        </div>





        In the example below we made the number of columns to be 5 so we will need at least 4 empty element to fix the issue in case we will have one to 4 elements in the last row. Of course, this is a drawback but since you know the number of columns you can easily set those empty elements and you won't need any JS.



        To make it more flexible, here is an idea with CSS variables:






        .flex-container 
         display: flex;
         flex-wrap: wrap;
         border:1px solid;
         --m:10px;
         --n:5;
         --width:150px;


        .flex-item 
         background: tomato;
         min-width: var(--width);
         flex-grow:1;
         width:calc(100%/var(--n) - 2*var(--m));
         height: 50px;
         margin: var(--m);
         
         box-sizing:border-box;


        .flex-container span 
         display:contents; /* each span will give us 2 elements*/

        .flex-container span:before,
        .flex-container span:after,
        .flex-container:before,
        .flex-container:after
         content:"";
         min-width: var(--width);
         flex-grow:1;
         width:calc(100%/var(--n) - 2*var(--m));
         margin:0 var(--m);
         order:1; /*we make sure they are at the end*/

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
         
         <!-- a lot of elements !! -->
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
        </div>

        <div class="flex-container wrap" style="--n:10">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
         
         <!-- a lot of elements !! -->
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
        </div>

        <div class="flex-container wrap" style="--n:3">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
         
         <!-- a lot of elements !! -->
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
        </div>





        I used display:contents to be able to set N empty elements that will later be considered as 2*N which can reduce the code.



        If you will have 7 columns, we will only need 6 extra elements. We can use the two pseudo elements then only 2 empty element to cover the remaining 4.






        .flex-container 
         display: flex;
         flex-wrap: wrap;
         max-width:calc(5*(200px + 20px)); 


        .flex-item 
         background: tomato;
         padding: 5px;
         width: 200px;
         height: 100px;
         margin: 10px;
         
         line-height: 100px;
         color: white;
         font-weight: bold;
         font-size: 2em;
         text-align: center;
         box-sizing:border-box;

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
        </div>





        .flex-container 
         display: flex;
         flex-wrap: wrap;
         max-width:calc(5*(200px + 20px)); 


        .flex-item 
         background: tomato;
         padding: 5px;
         width: 200px;
         height: 100px;
         margin: 10px;
         
         line-height: 100px;
         color: white;
         font-weight: bold;
         font-size: 2em;
         text-align: center;
         box-sizing:border-box;

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
        </div>





        .flex-container 
         display: flex;
         flex-wrap: wrap;


        .flex-item 
         background: tomato;
         padding: 5px;
         min-width: 200px;
         width:calc(100%/5 - 20px); /*5 columns*/
         height: 100px;
         margin: 10px;
         
         line-height: 100px;
         color: white;
         font-weight: bold;
         font-size: 2em;
         text-align: center;
         box-sizing:border-box;

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
        </div>





        .flex-container 
         display: flex;
         flex-wrap: wrap;


        .flex-item 
         background: tomato;
         padding: 5px;
         min-width: 200px;
         width:calc(100%/5 - 20px); /*5 columns*/
         height: 100px;
         margin: 10px;
         
         line-height: 100px;
         color: white;
         font-weight: bold;
         font-size: 2em;
         text-align: center;
         box-sizing:border-box;

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
        </div>





        .flex-container 
         display: flex;
         flex-wrap: wrap;


        .flex-item 
         --m:10px;
         background: tomato;
         padding: 5px;
         min-width: 200px;
         width:calc(100%/5 - 2*var(--m)); /*5 columns*/
         height: 100px;
         margin: var(--m);
         
         line-height: 100px;
         color: white;
         font-weight: bold;
         font-size: 2em;
         text-align: center;
         box-sizing:border-box;

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
        </div>





        .flex-container 
         display: flex;
         flex-wrap: wrap;


        .flex-item 
         --m:10px;
         background: tomato;
         padding: 5px;
         min-width: 200px;
         width:calc(100%/5 - 2*var(--m)); /*5 columns*/
         height: 100px;
         margin: var(--m);
         
         line-height: 100px;
         color: white;
         font-weight: bold;
         font-size: 2em;
         text-align: center;
         box-sizing:border-box;

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
        </div>





        .flex-container 
         display: flex;
         flex-wrap: wrap;
         --m:10px;


        .flex-item 
         background: tomato;
         padding: 5px;
         min-width: 200px;
         flex-grow:1;
         width:calc(100%/5 - 2*var(--m)); /*5 columns*/
         height: 100px;
         margin: var(--m);
         
         line-height: 100px;
         color: white;
         font-weight: bold;
         font-size: 2em;
         text-align: center;
         box-sizing:border-box;


        .flex-container span 
         min-width: 200px;
         flex-grow:1;
         width:calc(100%/5 - 2*var(--m)); /*5 columns*/
         margin:0 var(--m);

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
         
         <!-- 4 empty elements to fix the issue (we can also use pseudo element) -->
         <span></span>
         <span></span>
         <span></span>
         <span></span>
        </div>





        .flex-container 
         display: flex;
         flex-wrap: wrap;
         --m:10px;


        .flex-item 
         background: tomato;
         padding: 5px;
         min-width: 200px;
         flex-grow:1;
         width:calc(100%/5 - 2*var(--m)); /*5 columns*/
         height: 100px;
         margin: var(--m);
         
         line-height: 100px;
         color: white;
         font-weight: bold;
         font-size: 2em;
         text-align: center;
         box-sizing:border-box;


        .flex-container span 
         min-width: 200px;
         flex-grow:1;
         width:calc(100%/5 - 2*var(--m)); /*5 columns*/
         margin:0 var(--m);

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
         
         <!-- 4 empty elements to fix the issue (we can also use pseudo element) -->
         <span></span>
         <span></span>
         <span></span>
         <span></span>
        </div>





        .flex-container 
         display: flex;
         flex-wrap: wrap;
         border:1px solid;
         --m:10px;
         --n:5;
         --width:150px;


        .flex-item 
         background: tomato;
         min-width: var(--width);
         flex-grow:1;
         width:calc(100%/var(--n) - 2*var(--m));
         height: 50px;
         margin: var(--m);
         
         box-sizing:border-box;


        .flex-container span 
         display:contents; /* each span will give us 2 elements*/

        .flex-container span:before,
        .flex-container span:after,
        .flex-container:before,
        .flex-container:after
         content:"";
         min-width: var(--width);
         flex-grow:1;
         width:calc(100%/var(--n) - 2*var(--m));
         margin:0 var(--m);
         order:1; /*we make sure they are at the end*/

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
         
         <!-- a lot of elements !! -->
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
        </div>

        <div class="flex-container wrap" style="--n:10">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
         
         <!-- a lot of elements !! -->
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
        </div>

        <div class="flex-container wrap" style="--n:3">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
         
         <!-- a lot of elements !! -->
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
        </div>





        .flex-container 
         display: flex;
         flex-wrap: wrap;
         border:1px solid;
         --m:10px;
         --n:5;
         --width:150px;


        .flex-item 
         background: tomato;
         min-width: var(--width);
         flex-grow:1;
         width:calc(100%/var(--n) - 2*var(--m));
         height: 50px;
         margin: var(--m);
         
         box-sizing:border-box;


        .flex-container span 
         display:contents; /* each span will give us 2 elements*/

        .flex-container span:before,
        .flex-container span:after,
        .flex-container:before,
        .flex-container:after
         content:"";
         min-width: var(--width);
         flex-grow:1;
         width:calc(100%/var(--n) - 2*var(--m));
         margin:0 var(--m);
         order:1; /*we make sure they are at the end*/

        <div class="flex-container wrap">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
         
         <!-- a lot of elements !! -->
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
        </div>

        <div class="flex-container wrap" style="--n:10">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
         
         <!-- a lot of elements !! -->
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
        </div>

        <div class="flex-container wrap" style="--n:3">
         <div class="flex-item">1</div>
         <div class="flex-item">2</div>
         <div class="flex-item">3</div>
         <div class="flex-item">4</div>
         <div class="flex-item">5</div>
         <div class="flex-item">6</div>
         <div class="flex-item">7</div>
         <div class="flex-item">8</div>
         
         <!-- a lot of elements !! -->
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
        </div>






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Mar 21 at 23:21

























        answered Mar 21 at 22:31









        Temani AfifTemani Afif

        80.5k94692




        80.5k94692



























            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%2f55281598%2fcss-grid-max-columns-without-media-queries%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

            Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

            Image
            Pages using ISBN magic linksMbegu za lughaKamusiIsimu nenoKiarabukitabulughaKiswahilialfabetimaanaufafanuzimanenomuhtasarisarufividahizoalfabeti Kamusi Kutoka Wikipedia, kamusi elezo huru Jump to navigation Jump to search Kamusi za Kiswahili Kamusi ya Kiswahili-Kiswahili (kamusi wahidiya) Kamusi ya Kiswahili - Kiingereza (kamusi thania) Kamusi (kutoka neno la Kiarabu قاموس qamus ) ni kitabu ambacho kinaorodhesha maneno ya lugha yaliyokusanywa kutoka kwa watumiaji wa lugha fulani, kwa mfano lugha ya Kiswahili. Maneno hupangwa kwa mtindo wa alfabeti, hutoa maana, asili na ufafanuzi wa utumizi wa maneno na jinsi yanavyotumika au yanavyotamkwa. [1] Yaliyomo 1 Aina za kamusi 2 Muundo wa kamusi 2.1 1. Utangulizi wa kamusi 2.2 2. Matini ya kamusi 2.3 3. Sherehe ya kamusi 3 Faida za kamusi 4 Dhima ya picha katika kamusi 5 Marejeo 6 Tazama pia 7 Viungo vya nje Aina za kamusi | Kuna aina mbalimbali za kamusi ambazo ni: Kamusi wahidiya yaani ya l
            Read more

            Swift 4 - func physicsWorld not invoked on collision? The Next CEO of Stack OverflowHow to call Objective-C code from Swift#ifdef replacement in the Swift language@selector() in Swift?#pragma mark in Swift?Swift for loop: for index, element in array?dispatch_after - GCD in Swift?Swift Beta performance: sorting arraysSplit a String into an array in Swift?The use of Swift 3 @objc inference in Swift 4 mode is deprecated?How to optimize UITableViewCell, because my UITableView lags

            Image
            Strange use of "whether ... than ..." in official text Could a dragon use its wings to swim? Car headlights in a world without electricity How to avoid supervisors with prejudiced views? Is the offspring between a demon and a celestial possible? If so what is it called and is it in a book somewhere? Can I board the first leg of the flight without having final country's PR card? subequations: How to continue numbering within subequation? How do you define an element with an ID attribute using LWC? Relevant Part for a Badminton Serve What CSS properties can the br tag have? What are the unusually-enlarged wing sections on this P-38 Lightning? Why did early computer designers eschew integers? Is it a bad idea to plug the other end of ESD strap to wall ground? Magento 1.9 observer on only new product added ( no updated product ) Airplane gently rocking its wings during whole flight It is correct to match light sources with the same color temperat
            Read more

            Access current req object everywhere in Node.js ExpressWhy are global variables considered bad practice? (node.js)Using req & res across functionsHow do I get the path to the current script with Node.js?What is Node.js' Connect, Express and “middleware”?Node.js w/ express error handling in callbackHow to access the GET parameters after “?” in Express?Modify Node.js req object parametersAccess “app” variable inside of ExpressJS/ConnectJS middleware?Node.js Express app - request objectAngular Http Module considered middleware?Session variables in ExpressJSAdd properties to the req object in expressjs with Typescript

            Image
            What steps should I take to lawfully visit the United States as a tourist immediately after visiting on a B-1 visa? Would dual wielding daggers be a viable choice for a covert bodyguard? For a hashing function like MD5, how similar can two plaintext strings be and still generate the same hash? Using Newton's shell theorem to accelerate a spaceship Why doesn't sea level show seasonality? What prevents someone from claiming to be the murderer in order to get the real murderer off? Has anyone in space seen or photographed a simple laser pointer from Earth? What does (void *)1 mean Why does the U.S. tolerate foreign influence from Saudi Arabia and Israel on its domestic policies while not tolerating that from China or Russia? Modulus Operandi What's the point of having a RAID 1 configuration over incremental backups to a secondary drive? How to ask for a LinkedIn endorsement? Good resources for solving techniques (Metaheuristics, MILP, CP etc) How woul
            Read more