CODEWITHSUNDEEP
htmlangularjscss
StrugglingCoder
StrugglingCoder

Reputation: 5021

Why is css grid not working

I have a html template like the following:

<div>
    <div class="my-grid-container"  ng-repeat="cardData in summaryCardsCtrl.summaryDetails" >
         <div class="myClass">
             My custom div
         </div>
    </div>
</div>

I want the first div to span for two rows, something like:

enter image description here

I am using CSS3 GridBox like the following:

.my-grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
}

.my-grid-container > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  max-height: 70px;
}

.my-grid-container > .myClass:first-child {
    grid-row: 1 / 3;
}

But it did not work. The divs are all stacked on top of each other. But I want the first the div to span 2 rows and the rest to occupy equal spaces.

enter image description here

What am I doing wrong? Please help.

UPDATE

Please see the codepen. https://codepen.io/chiranjib/pen/vjpOKE

Or, the codebase

var myApp = angular.module('myApp', []);

myApp.controller('CardController', ['$scope', function($scope) {
  $scope.cardData = [
    {'name': 'My Div1', 'quantity': 3, 'price': 1.10},
    {'name': 'My Div2', 'quantity': 2, 'price': 1.99},
    {'name': 'My Div3', 'quantity': 1, 'price': 3.22},
    {'name': 'My Div4', 'quantity': 1, 'price': 3.74}
  ];
}]);
.my-grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
}

.my-grid-container > div {
  /*background-color: rgba(255, 255, 255, 0.8);*/
  background-color: aqua;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  height: auto;
}

.my-grid-container > .myClass:first-child {
    grid-row: 1 / 3;
}
<html ng-app="myApp">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  </head>
  <body ng-controller="CardController">
            <div  class="my-grid-container" ng-repeat="cardData in cardData" >
               <div class="myClass">
                My Changed Divs
             </div>
        </div> 
  </body>
</html>

Upvotes: 0

Views: 30395

Answers (1)

nitishk72
nitishk72

Reputation: 1746

This is work perfectly. Actually, you were creating my-grid-container class in each repetition which was wrong. 

<div>
    <div class="my-grid-container" >
         <div class="myClass" ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
             My custom div
         </div>
    </div>
</div>

I had edited HTML code and added one object in $scope.cardData 

var myApp = angular.module('myApp', []);

myApp.controller('CardController', ['$scope', function($scope) {
  $scope.cardData = [
    {'name': 'My Div1', 'quantity': 3, 'price': 1.10},
    {'name': 'My Div2', 'quantity': 2, 'price': 1.99},
    {'name': 'My Div3', 'quantity': 1, 'price': 3.22},
    {'name': 'My Div4', 'quantity': 1, 'price': 3.74},
    {'name': 'My Div5', 'quantity': 1, 'price': 3.74}
  ];
}]);
.my-grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
}

.my-grid-container > div {
  /*background-color: rgba(255, 255, 255, 0.8);*/
  background-color: aqua;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  height: auto;
}

.my-grid-container > .myClass:first-child {
    grid-row: 1 / 3;
}
<html ng-app="myApp">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  </head>
  <body ng-controller="CardController">
            <div  class="my-grid-container" >
               <div class="myClass"  ng-repeat="cardData in cardData">
                My Changed Divs
             </div>
        </div> 
  </body>
</html>

Upvotes: 4

Related Questions