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

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

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

            은진 송씨 목차 역사 본관 분파 인물 조선 왕실과의 인척 관계 집성촌 항렬자 인구 같이 보기 각주 둘러보기 메뉴은진 송씨세종실록 149권, 지리지 충청도 공주목 은진현

            Image
            송씨은진 송씨충청남도 소재 성씨논산시 충청남도논산시은진면한국의 성씨고려송명의회덕 황씨류준고흥 류씨송유조선송준길문묘송시열좌의정문묘종묘송준길송규렴송상기송시열송인수송환기송치규송근수충청남도논산시은진면백제757년충청남도은진군논산군논산시은진면송유 은진 송씨 위키백과, 우리 모두의 백과사전. (회덕 송씨에서 넘어옴) 둘러보기로 가기 검색하러 가기 은진 송씨 (恩津 宋氏) 관향 충청남도 논산시 은진면 시조 송대원(宋大源) 주요 중시조 송명의(宋明誼) 주요 집성촌 대전광역시 충청남도 논산시 전라남도 진도군 전라남도 여수시 경상남도 거제군 경상남도 남해군 경상남도 합천군 주요 인물 송인수, 송기수, 송이창, 송갑조, 송준길, 송시열, 송규렴, 송상기, 송환기, 송치규, 송근수, 송병선, 송병준, 송지헌, 송종헌, 송순기, 송화식, 송진백, 송건호, 송원영, 송두호, 송백헌, 송자, 송진훈, 송민순, 송영무, 송영선, 송언석, 송중기 인구 (2015년) 226,050명 은진 송씨 (恩津 宋氏)는 충청남도 논산시 은진면을 본관으로 하는 한국의 성씨이다. 목차 1 역사 2 본관 3 분파 4 인물 5 조선 왕실과의 인척 관계 6 집성촌 7 항렬자 8 인구 9 같이 보기 10 각주 역사 은진 송씨(恩津 宋氏)의 시조 송대원 (宋大源)이 고려 때 판원사(判院事)를 지내고 나라에 공을 세워 은진군(恩津君)에 봉해졌다고 한다. 송대원의 증손자인 송명의(宋明誼)가 1362년(공민왕 11) 문과에 급제하고 사헌부 집단(司憲府執端)에 이르렀으나 고려가 망하자 불사이군(不事二君)의 충절로 낙향하여 처가인 회덕 황씨촌에 자리잡았다. 송명의(宋明誼)의 아들 송극기(宋克己)가 류준(柳濬)의 딸 고흥 류씨(高興柳氏)와 결혼하여 아들 송유(宋愉, 1388년 ~ 1446년)를 두었다. 송유는 12세에 부사정(副司正)이 되었는데, 13세에 관직을 버리고 고향 회덕으로 돌아와 학문에 정진하였다. 은진 송씨는 조선시대 문과 급
            Read more