how to give column equal width from total width?

Question

I am trying to make example of grid view .I am dynamically generate the table view or grid view .I need column take equal % of width .Example if I have two column they will take 50% with individual .If there is three column then they will take 33.33% individual

Please check image of grid what I am trying to make

![enter image description here][1]

Here is my code

http://plnkr.co/edit/X0PQov1UA2yEbx8qaOFl?p=preview

<div class="row">
    <div ng-repeat="d in data | filter:{checked: true}">
        <div class="col">{{d.label}}</div>
        <div class="row" ng-repeat="column in displayData">
            <div class="col" ng-repeat="field in column.columns" ng-show="d.fieldNameOrPath==field.fieldNameOrPath">{{field.value}}</div>
        </div>
    </div>
</div>

Answer 1

Since you've got display: flex (and nothing about wrapping rows) on the containing element, it should work fine if you simply specify width: 100% on each column's <div>.

I've adjusted your Plunk here: http://plnkr.co/edit/YAWmKBsgyevoyrhqfQqO?p=preview - the difference is the style attribute on this element:

<div style="width: 100%;" ng-repeat="d in data | filter:{checked: true}">...</div>

You can learn more about display: flex here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I recommend you also review your classes, since the current structure is quite confusing.