項目跨度X 2在CSS網格

我已經創建了一個非常簡單的流體CSS網格，其我想顯示是雙大小佔用4個方格，而不是1。某些項目如果正方形1是在被加倍圖像下方它會佔用盒1，2，8和9項目跨度X 2在CSS網格

css grid goes here

HTML

<div id="wrapper"> 
    <h1>Test Grid</h1> 

    <ul id="grid"> 
     <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li> 
    </ul> 
</div>

CSS

#wrapper { 
    margin: 10px; 
    border: 1px solid black; 
    padding: 5px 10px; 
} 

div, ul, li{ 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

#grid{ 
    margin: 0 auto; 
} 

#grid li{ 
    display: inline-block; 
    background: #eee; 
    width: 165px; 
    height: 165px; 
    margin: 0 1px 1px 0; 
}

我該如何做到這一點？

請檢查我當前fiddle

來源

2013-07-12 Imran

這是可以做到的，但我只覺得左側（通過使用float:left），請檢查您updated fiddle。

否則我認爲你需要使用table與colspan和rowspan。

來源

2013-07-12 06:32:00 LinkinTED

當然肯定還有別的辦法嗎？我想在整個網格中放置更大的瓷磚，而不僅僅是第一個孩子。 – Imran

項目跨度X 2在CSS網格

回答

相關問題