A Way to Count Columns in a Responsive Grid

A way to count columns in a responsive grid

I think the easiest way without brute force is to consider a simple division. You can easily find the width of the container and each column is defined by minmax(300px,1fr) and we know the gap. Using all these information the calculation should be done like below:

If we will have N columns then we will have N-1 gaps. We also know that W should at least be 300px and cannot be more than a value (we will call Wmax).

Let's suppose the gap is equal to 10px.

If N=2 and each column is equal to 300px we will have the container width equal to 300px*2 + 10px*1 = 610px.

If N=3 and each column is equal to 300px we will have 300px*3 + 10px*2=920px.

Now it's clear that if the container width is between 610px and 920px we will have 2 columns because there is no space to hold 3 columns but enough space to hold 2 columns that we expand to fill the remaining space (using 1fr) so Wmax in this case is (920px - 10px)/2 = 455px. In other words, the width will vary from 300px to 455px when having 2 columns.

So if we take the formula 300px*N + 10px*(N-1) = Wc with Wc our container width you will see that N is equal to 2 when Wc=610px and 3 when Wc=920px and between we will have a result in [2,3] so we simply round the value to the smallest one (2 in this case) and we will have our column number.

Here is a basic example:

var gap = 10;var minW = 200;
var Wc = document.querySelector('.grid').offsetWidth;var N = Math.floor((Wc+gap)/(minW+gap));console.log(N);

window.addEventListener('resize', function(event){   Wc = document.querySelector('.grid').offsetWidth;   N = Math.floor((Wc+gap)/(minW+gap));   console.log(N);});

.grid {  display:grid;  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));  grid-gap:10px;}span {  min-height:50px;  background:red;}

<div class="grid">  <span></span>  <span></span>  <span></span>  <span></span>  <span></span>  <span></span></div>

Using column-count for responsive grid system

I would not use it. It is not flexible enough (yet) for common scenarios.

I once had the same idea, started to use it, but very quickly reached the point where I could not fix some alignments .

Dynamic column count grid for responsive web design

Are you familiar with Bootstrap grid system?
https://getbootstrap.com/examples/grid/

Get a link for Bootstrap CDN from here (https://www.bootstrapcdn.com/) and link to your html and try this:

.html

<div class="container">
 <div class="col-md-3 col-sm-4 square">1</div>
 <div class="col-md-3 col-sm-4 square">2</div>
 <div class="col-md-3 col-sm-4 square">3</div>
 <div class="col-md-3 col-sm-4 square">4</div>
 <div class="col-md-3 col-sm-4 square">5</div>
 <div class="col-md-3 col-sm-4 square">6</div>
 <div class="col-md-3 col-sm-4 square">7</div>
 <div class="col-md-3 col-sm-4 square">8</div>
</div>

.css

.square {
  border:solid;
  border-color: WHATEVERCOLOR;
  width: 200px;
  height: 200px;
}

If you are curious to know what class fix of ".col-md" or "col-sm" are, check "Grid Options" paragraph on this page:
http://v4-alpha.getbootstrap.com/layout/grid/

Change the number of columns and rows in a grid as the number of items increase

Implicit columns creation can do this. You can consider nth-child()/nth-last-child() to create a new column when you reach a specific number of columns:

.container {
  display: inline-grid;
  width: 100px;
  vertical-align: top;
  border: 1px solid;
}
.container > :nth-child(2) {
  grid-column: 2;
}

.container > :nth-last-child(n + 5) ~ :nth-child(3) { 
 grid-column: 3;
}

.container > :nth-last-child(n + 10) ~ :nth-child(4) { 
 grid-column: 4;
}

.container > :nth-last-child(n + 17) ~ :nth-child(5) { 
 grid-column: 5;
}

.container > * {
  border: 1px solid red;
  aspect-ratio: 1;
}

<div class="container">
<div></div>
</div>

<div class="container">
<div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

How to create a responsive (varying column count) Angular-Material card grid

You can use the material Grid-List, it allows for custom col-spans and animates the changes when the width changes.

I adapted the sample from the site and added md-card in the contents. Make sure to add layout-fill on the md-card.
You can easily adapt the sample for your column count.

http://codepen.io/anon/pen/QypjWY

I also adapted your 5 card sample. You need to know the height of the cards in order to use the Grid-List, but you can easily achieve the 100% height on small screens. You can use ratios or fixed CSS heights for the rows and then it is your cards job to display the content in a flexible way.

<md-grid-list ng-app="app" layout-fill flex
    md-cols-sm="1"
    md-cols-md="2"
    md-cols-gt-md="5"
    md-row-height-sm="100%"
    md-row-height="600px"
    md-gutter="8px">
    <md-grid-tile ng-repeat="i in [1,2,3,4,5] track by $index">
        <md-card layout-fill>

http://jsfiddle.net/2afaok1n/34/

Edit:

If you are instead looking for some kind of staggered grid, then you have to add a library: angular-deckgrid, it just provides the grid layout, everything in the content is angular-material. Unlike angular-masonry this library doesn't have any dependencies. If you are not worried about adding jQuery and the like then you can also use angular-masonry.

<div ng-app="app" ng-controller="DeckController" flex layout="column">
   <deckgrid class="deckgrid" flex source="data">
       <md-card>

The important part for the deck layout is the CSS configuration. With this you configure the number of columns and their width. I have used a media query for the angular-material sm breakpoint to switch to single column layout.

.deckgrid::before {
  content: '4 .column.column-1-4';
  font-size: 0;
  visibility: hidden;
}

.deckgrid .column {
  float: left;
}

.deckgrid .column-1-4 {
  width: 25%;
}

.deckgrid .column-1-1 {
  width: 100%;
}

@media screen and (max-width: 960px) {
  .deckgrid::before {
    content: '1 .column.column-1-1';
  }
}

http://jsfiddle.net/2afaok1n/39/

Edit 2:

There is also a masonry version which doesn't require jQuery and a simple directive to use it: angular-masonry-directive. Here is an example, it works similar to the other one.

http://jsfiddle.net/xjnp97ye/1/

Ag-grid Size to Fit on desktop and Auto-Size on mobile

you can call them after another. I'd suggest to first call the autoSizeColumns.

Afterwards you calculate the actual tableWidth with something like

const tableWidth = grid.columnApi.getAllColumns()
    .reduce((i, current) => i += current.getActualWidth(), 0);

and then you calculate the actual container width

const {left, right} = grid.api.getHorizontalPixelRange();
const containerWidth = right - left;

and only if the tableWidth is smaller than the container width you call `sizeColumnsToFit``

if (tableWidth < containerWidth) {
     grid.api.sizeColumnsToFit();
}

responsive grid: different column widths

Desktop
Mobile <641

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
    body,
    html {
        padding: 0;
        margin: 0;
    }

    .bg-color {
        background-color: #ccc;
    }

    .bg-color1 {
        background: #817e7e;
    }

    /*  This is for three box Wrapper  */
    .my-row {
        display: flex;
        flex-flow: row wrap;
    }

    /* This is for three box  */
    .my-col {
        flex: 0 0 33.333%;
        width: 33.333%;
    }

    @media (max-width: 641px) {
        .my-col {
            flex: 0 0 100%;
            width: 100%;
        }
    }
    </style>
</head>

<body>
    <div class="my-row">
        <div class="my-col bg-color">
            <h1>Col 1</h1>
        </div>
        <div class="my-col bg-color1">
            <h1>Col 2</h1>
        </div>
        <div class="my-col bg-color">
            <h1>Col 3</h1>
        </div>
    </div>
</body>

</html>

---

Related Topics