[UI] display:inline-blockを使って横並びのレイアウトをする方法＋入れ子

『display:inline-blockを使って横並びのレイアウトをする方法』の続きで、入れ子を加えたバージョンです。入れ子のパターンは同幅で6分割まで。隙間ありの.nestと隙間なしの.nest-fullの2パターン。

DEMO

1/6

1/6

1/6

1/6

1/6

1/6

1/5

1/5

1/5

1/5

1/5

1/4

1/4

1/4

1/4

1/3

1/3

1/3

1/2

1/2

1/2

1/2

1/3

1/3

1/3

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/4

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/5

1/6

1/6

1/6

1/6

1/6

1/6

2/5

3/5

1/6

1/6

1/6

1/6

1/6

1/6

1/6

5/6

HTML

 

  

   
1/6
   
1/6
   
1/6
   
1/6
   
1/6
   
1/6
  
 
 

  

   
1/5
   
1/5
   
1/5
   
1/5
   
1/5
  
 
 

  

   
1/4
   
1/4
   
1/4
   
1/4
  
 
 

  

   
1/3
   
1/3
   
1/3
  
 
 

  

   
1/2
   
1/2
  
 
 

  

   
1/2 full
   
1/2 full
  
 
 

  

   
1/3
   
1/3
   
1/3
  
 
 

  

   
1/4
   
1/4
   
1/4
   
1/4
  
 
 
1/4
 
1/4
 
1/4
 
1/4
 
1/4
 

  

   
1/5
   
1/5
   
1/5
   
1/5
   
1/5
  
 
 
1/5
 
1/5
 
1/5
 
1/5
 
1/5
 
1/5
 

  

   
1/6
   
1/6
   
1/6
   
1/6
   
1/6
   
1/6
  
 
 
2/5
 
3/5
 
1/6
 
1/6
 
1/6
 
1/6
 
1/6
 
1/6
 
1/6
 
5/6

CSS

/* grid inline-block
----------------------------------------------------------------------------------------------------*/
.grid {
 font-size: 0;
}
.grid > div {
 display: inline-block;
 font-size: 14px;
 vertical-align: top;
 padding: .75em;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 background: #f0f0f0;
}
.grid > div > div {
 min-height: 2em;
 line-height: 2;
 background: #34495E;
 color: #FFF;
 text-align: center;
}
/* 入れ子 基本設定
----------------------------------------------- */
.nest, .nest-full {
 font-size: 0;
}
.nest > div, .nest-full > div {
 display:inline-block;
 font-size: 14px;
 letter-spacing: normal;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.nest > div > div {
 min-height:1em;
 margin-bottom:1em;
 background:#FFBCBC;
}
.nest-full > div > div {
 min-height:1em;
 margin-bottom:1em;
}
.nest-full > :nth-child(2n+1) > div {
 background:#57C3E5;
}
.nest-full > :nth-child(2n) > div {
 background:#37BABF;
}
/* Column Widths
----------------------------------------------- */
.col1of1 {width:100%;}
.col1of2 {width:50%;}
.col1of3 {width:33.33333%;}
.col2of3 {width:66.66666%;}
.col1of4 {width:25%;}
.col3of4 {width:75%;}
.col1of5 {width:20%;}
.col2of5 {width:40%;}
.col3of5 {width:60%;}
.col4of5 {width:80%;}
.col1of6 {width:16.66669%;}
.col5of6 {width:83.33333%;}
/* 入れ子 隙間
----------------------------------------------------------------------------------------------------*/
/* 2列 */
.nest .col1of2:nth-child(2n+1) {
 padding:0 .5em 0 0;
}
.nest .col1of2:nth-child(2n) {
 padding:0 0 0 .5em;
}
/* 3列 */
.nest .col1of3:nth-child(3n+1) {
 padding:0 .66em 0 0;
}
.nest .col1of3:nth-child(3n+2) {
 padding:0 .33em;
}
.nest .col1of3:nth-child(3n) {
 padding:0 0 0 .66em;
}
/* 4列 */
.nest .col1of4:nth-child(4n+1) {
 padding:0 .75em 0 0;
}
.nest .col1of4:nth-child(4n+2) {
 padding:0 .5em 0 .25em;
}
.nest .col1of4:nth-child(4n+3) {
 padding:0 .25em 0 .5em;
}
.nest .col1of4:nth-child(4n) {
 padding:0 0 0 .75em;
}
/* 5列 */
.nest .col1of5:nth-child(5n+1) {
 padding:0 .8em 0 0;
}
.nest .col1of5:nth-child(5n+2) {
 padding:0 .6em 0 .2em;
}
.nest .col1of5:nth-child(5n+3) {
 padding:0 .4em;
}
.nest .col1of5:nth-child(5n+4) {
 padding:0 .2em 0 .6em;
}
.nest .col1of5:nth-child(5n) {
 padding:0 0 0 .8em;
}
/* 6列 */
.nest .col1of6:nth-child(6n+1) {
 padding:0 .83em 0 0;
}
.nest .col1of6:nth-child(6n+2) {
 padding:0 .67em 0 .17em;
}
.nest .col1of6:nth-child(6n+3) {
 padding:0 .5em 0 .33em;
}
.nest .col1of6:nth-child(6n+4) {
 padding:0 .33em 0 .5em;
}
.nest .col1of6:nth-child(6n+5) {
 padding:0 .17em 0 .67em;
}
.nest .col1of6:nth-child(6n) {
 padding:0 0 0 .83em;
}

使用上のポイント

• 隙間問題はfont-size:0;を使う。
• 幅指定は%『FluidGrids』参照
• Box-sizing対応状況

CSS対応状況

• CSS 2.1 selectors
• CSS3 selectors
• CSS3 Box-sizing
• CSS min/max-width/height