使用內聯網格使中間項目更大

Question

我正在嘗試為托管公司的每個計划建立一個網格。 但是我無法弄清楚一件事。 對於托管網格，如何使中間的項目看起來比其他兩個項目高？

程式碼片段：

 .Hosting { list-style-type: none; margin: 0 auto; padding: 0; text-align: center; } .Hosting>li { display: inline-grid; width: calc(33% - 15px); -moz-box-shadow: 0 0 20px #c3d7ef; -webkit-box-shadow: 0 0 20px #c3d7ef; box-shadow: 0 0 20px #c3d7ef; background: #FFF; padding: 20px; border-radius: 4px; margin: 5px; } 

 <ul class="Hosting"> <li> <h2> Small <small>10.99€</small> </h2> <ul> <li><i class="fa fa-check"></i> Item</li> </ul> <a href="" class="Order"><button>Order Now</button></a> </li> <li> <h2> Small <small>10.99€</small> </h2> <ul> <li><i class="fa fa-check"></i> Item</li> </ul> <a href="" class="Order"><button>Order Now</button></a> </li> <li> <h2> Small <small>10.99€</small> </h2> <ul> <li><i class="fa fa-check"></i> Item</li> </ul> <a href="" class="Order"><button>Order Now</button></a> </li> </ul> 

我試圖設置它們的高度和邊距，但這似乎不起作用。 因為它是嵌入式網格，但是我認為那是顯示我的計划的最佳方法？ 我不是使用花車的忠實粉絲。

關於如何實現此目標的任何想法嗎？

Answer 1

在要顯示比其他兩個更大的項目上使用css屬性transform:scale(1.2) ！