利用可能な水平スペースを占めるグリッドアイテム

グリッドには16個のグリッドアイテムが含まれています。利用可能な水平スペースを占めるグリッドアイテム

トップグリッドに4グリッドの項目、2行目の3行目、3行目の2行目、4行目の7列目を使用したいと考えています。

数値をgrid-template-columns、つまり12に指定し、グリッド項目にgrid-column-end: span-*を使用してこれを実現できます。しかし、これは、7つのアイテムが均等に配置されるようにする行には適切ではありません。

上記のコードスニペット：

.grid-container { 
 
    display: grid; 
 
    grid-template-columns: repeat(12, 1fr [col]); 
 
    grid-template-rows: repeat(4, 50px [row]); 
 
    grid-gap: 10px; 
 
} 
 

 
.grid-item { 
 
    border-radius: 5px; 
 
    color: white; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.tier1 { 
 
    background-color: mediumseagreen; 
 
    grid-column-end: span 3; 
 
} 
 

 
.tier2 { 
 
    background-color: mediumorchid; 
 
    grid-column-end: span 4; 
 
} 
 

 
.tier3 { 
 
    background-color: mediumpurple; 
 
    grid-column-end: span 6; 
 
} 
 

 
.tier4 { 
 
    background-color: mediumvioletred; 
 
    grid-column-end: span 2; 
 
}

<div class="grid-container"> 
 
    <div class="grid-item tier1">1</div> 
 
    <div class="grid-item tier1">2</div> 
 
    <div class="grid-item tier1">3</div> 
 
    <div class="grid-item tier1">4</div> 
 
    <div class="grid-item tier2">5</div> 
 
    <div class="grid-item tier2">6</div> 
 
    <div class="grid-item tier2">7</div> 
 
    <div class="grid-item tier3">8</div> 
 
    <div class="grid-item tier3">9</div> 
 
    <div class="grid-item tier4">10</div> 
 
    <div class="grid-item tier4">11</div> 
 
    <div class="grid-item tier4">12</div> 
 
    <div class="grid-item tier4">13</div> 
 
    <div class="grid-item tier4">14</div> 
 
    <div class="grid-item tier4">15</div> 
 
    <div class="grid-item tier4">16</div> 
 
</div>

（その最後の項目力自体 grid-template-columnsで指定されていない列に7つのアイテム、と離れて最終行から）グリッド項目に grid-column-endを使用して動作を期待

これを解決するための私の考えは、PR grid-template-columnsでauto-fillを使用することですしかし、別の行には対処しません。

オートフィル行動：

.grid-container { display: grid; grid-template-columns: repeat(auto-fill, 50px); grid-template-rows: repeat(4, 50px); grid-gap: 10px; } .grid-item { border-radius: 5px; color: white; display: flex; align-items: center; justify-content: center; } .tier1 { background-color: mediumseagreen; } /* grid-column-end: span 3; */ .tier2 { background-color: mediumorchid; /* grid-column-end: span 4; */ } .tier3 { background-color: mediumpurple; /* grid-column-end: span 6; */ } .tier4 { background-color: mediumvioletred; /* grid-column-end: span 2; */ } Code snippet of above:

<div class="grid-container"> <div class="grid-item tier1">1</div> <div class="grid-item tier1">2</div> <div class="grid-item tier1">3</div> <div class="grid-item tier1">4</div> <div class="grid-item tier2">5</div> <div class="grid-item tier2">6</div> <div class="grid-item tier2">7</div> <div class="grid-item tier3">8</div> <div class="grid-item tier3">9</div> <div class="grid-item tier4">10</div> <div class="grid-item tier4">11</div> <div class="grid-item tier4">12</div> <div class="grid-item tier4">13</div> <div class="grid-item tier4">14</div> <div class="grid-item tier4">15</div> <div class="grid-item tier4">16</div> </div>

はCSSグリッドで可能な行動はありますか？

出典

2017-01-15 alanbuchanan

あなたはどのようなブラウザ（複数可）を使用していますか？ –

@Michael_B Chromeバージョン57.0.2976。0カナリアン（64ビット） – alanbuchanan

ここでスニペットを2リンクにすることはできますか？あなたを助けるのは大変便利ではありません.... –

私はことを理解し、あなたが代わりgrid-gap: 10px;

.grid-container { 
 
    display: grid; 
 
    grid-template-columns: repeat(84, 1fr [col]); 
 
    grid-template-rows: repeat(4, 60px [row]); 
 
    
 
} 
 

 
.grid-item { 
 
    border-radius: 5px; 
 
    color: white; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    margin:5px 
 
} 
 

 
.tier1 { 
 
    background-color: mediumseagreen; 
 
    grid-column-end: span 21; 
 
} 
 

 
.tier2 { 
 
    background-color: mediumorchid; 
 
    grid-column-end: span 28; 
 
} 
 

 
.tier3 { 
 
    background-color: mediumpurple; 
 
    grid-column-end: span 42; 
 
} 
 

 
.tier4 { 
 
    background-color: mediumvioletred; 
 
    grid-column-end: span 12; 
 
}

<div class="grid-container"> 
 
    <div class="grid-item tier1">1</div> 
 
    <div class="grid-item tier1">2</div> 
 
    <div class="grid-item tier1">3</div> 
 
    <div class="grid-item tier1">4</div> 
 
    <div class="grid-item tier2">5</div> 
 
    <div class="grid-item tier2">6</div> 
 
    <div class="grid-item tier2">7</div> 
 
    <div class="grid-item tier3">8</div> 
 
    <div class="grid-item tier3">9</div> 
 
    <div class="grid-item tier4">10</div> 
 
    <div class="grid-item tier4">11</div> 
 
    <div class="grid-item tier4">12</div> 
 
    <div class="grid-item tier4">13</div> 
 
    <div class="grid-item tier4">14</div> 
 
    <div class="grid-item tier4">15</div> 
 
    <div class="grid-item tier4">16</div> 
 
</div>

出典

2017-02-15 04:14:35

をmarginを使用することができ、それはまた、7

によって分けることができるように、COL番号とスパン値を増やすことができますねCSSグリッドに注目しています。私が読んだときしかし：

を私は、彼らがすべての可能なスペースを取るようにそれらのそれぞれが均等に配置することにしたいです。 CSSフレキシボックスのように私に聞こえる

は仕事のための最適なツールとなります。ここで

はCSSフレキシボックスと代替ソリューションです：

.grid-container { 
 
display: flex; 
 
flex-flow: row wrap; 
 
justify-content: space-between; 
 
width: 460px; 
 
} 
 

 
.grid-item { 
 
display: block; 
 
height: 60px; 
 
line-height: 60px; 
 
color: rgb(255, 255, 255); 
 
text-align: center; 
 
font-size: 22px; 
 
font-weight: bold; 
 
border-radius: 9px; 
 
margin: 4px; 
 
} 
 

 
.tier1 { 
 
flex: 1 1 calc((100% - (2 * 4px * 4))/4); /* 4 blocks */ 
 
background-color: mediumseagreen; 
 
} 
 

 
.tier2 { 
 
flex: 1 1 calc((100% - (2 * 4px * 3))/3); /* 3 blocks */ 
 
background-color: mediumorchid; 
 
} 
 

 
.tier3 { 
 
flex: 1 1 calc((100% - (2 * 4px * 2))/2); /* 2 blocks */ 
 
background-color: mediumpurple; 
 
} 
 

 
.tier4 { 
 
flex: 1 1 calc((100% - (2 * 4px * 7))/7); /* 7 blocks */ 
 
background-color: mediumvioletred; 
 
}

<div class="grid-container"> 
 
    <div class="grid-item tier1">1</div> 
 
    <div class="grid-item tier1">2</div> 
 
    <div class="grid-item tier1">3</div> 
 
    <div class="grid-item tier1">4</div> 
 
    <div class="grid-item tier2">5</div> 
 
    <div class="grid-item tier2">6</div> 
 
    <div class="grid-item tier2">7</div> 
 
    <div class="grid-item tier3">8</div> 
 
    <div class="grid-item tier3">9</div> 
 
    <div class="grid-item tier4">10</div> 
 
    <div class="grid-item tier4">11</div> 
 
    <div class="grid-item tier4">12</div> 
 
    <div class="grid-item tier4">13</div> 
 
    <div class="grid-item tier4">14</div> 
 
    <div class="grid-item tier4">15</div> 
 
    <div class="grid-item tier4">16</div> 
 
</div>

出典

2017-03-29 21:09:51 Rounin

利用可能な水平スペースを占めるグリッドアイテム

答えて

関連する問題