nth-child付きCSSグリッド

Question

nth-childを使用して不均一な列の繰り返しパターンを作成することはできますか？これは私が持っているものですが、それは最初の行だけの作品：

.three-cols > div:nth-child(1n) { 
    width: 50%; 
} 
.three-cols > div:nth-child(2n) { 
    width: 25%; 
} 

.three-cols > div:nth-child(3n) { 
    width: 25%; 
} 

.three-cols > div:nth-child(3n) { 
margin-right: 0; 
} 

だから私は、すべての行分割をしたい：50％、25％、25％

http://codepen.io/garethj/pen/KNpQYd

Answer 1

は三つの項目があります。各セレクタに3nを使用する必要があります。あなたは、あなたがターゲットとしたい要素に応じて、1、2または3で、このオフセット：

.three-cols > div:nth-child(3n+1) { 
 
    width: 50%; 
 
} 
 
.three-cols > div:nth-child(3n+2) { 
 
    width: 25%; 
 
} 
 
.three-cols > div:nth-child(3n+3) { 
 
    width: 25%; 
 
} 
 
.three-cols > div:nth-child(3n+3) { 
 
    margin-right: 0; 
 
} 
 
.block { 
 
    overflow: hidden; 
 
} 
 
.block > div { 
 
    box-sizing: border-box; 
 
    float: left; 
 
    border: 3px solid purple; 
 
}

<footer> 
 
    <div class="block three-cols"> 
 

 
    <div>50%</div> 
 
    <div>25%</div> 
 
    <div>25%</div> 
 

 
    <div>50%</div> 
 
    <div>25%</div> 
 
    <div>25%</div> 
 

 
    <div>50%</div> 
 
    <div>25%</div> 
 
    <div>25%</div> 
 

 
    </div> 
 
</footer>

Answer 2

はこれを試してみてください。

.block { overflow: hidden; } 
 
.block > div { 
 
    box-sizing: border-box; 
 
    float: left; 
 
    border: 3px solid purple; 
 
    width: 25%; 
 
} 
 
.three-cols > div:nth-child(3n+1) { width: 50%; } 
 
.three-cols > div:nth-child(3n+3) { margin-right: 0; }

<footer> 
 
<div class="block three-cols">  
 
    <div>50%</div> 
 
    <div>25%</div> 
 
    <div>25%</div> 
 
    <div>50%</div> 
 
    <div>25%</div> 
 
    <div>25%</div> 
 
    <div>50%</div> 
 
    <div>25%</div> 
 
    <div>25%</div> 
 
</div> 
 
    </footer>

それが役に立つことを願っています。