I have a unique HTML structure that looks like this:
<div>
<div class="my-grid-container" ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div class="myClass">
My customized div
</div>
</div>
</div>
My goal is to make the first div span across two rows, similar to this example:
https://i.sstatic.net/AwXJp.png
To achieve this, I am utilizing CSS3 GridBox in the following manner:
.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;
}
However, my current implementation is not producing the desired result. I want the first div to span two rows and evenly distribute the remaining divs.
https://i.sstatic.net/dAtHO.png
Can anyone identify what I may be doing wrong? Any assistance would be much appreciated.
UPDATE
Please refer to the provided codepen for further examination: https://codepen.io/chiranjib/pen/vjpOKE
Or, explore the codebase below
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">
Modified Divs
</div>
</div>
</body>
</html>