У меня есть HTML-шаблон, подобный следующему:
<div>
<div class="my-grid-container" ng-repeat="cardData in summaryCardsCtrl.summaryDetails" >
<div class="myClass">
My custom div
</div>
</div>
</div>
Я хочу, чтобы первый div занимал две строки , что-то вроде:
Я использую CSS3 GridBox, как показано ниже :
.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;
}
Но это не сработало. Дивы все сложены друг на друга.
Но я хочу, чтобы первый div занимал 2 строки, а остальные занимали равные места.
Что я делаю не так? Пожалуйста, помогите.
UPDATE
Пожалуйста, смотрите кодовое поле. https://codepen.io/chiranjib/pen/vjpOKE
Или кодовая база
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>