基础篇39. 挑战views的极限(3)-- CSS网格布局入门

龴龳龰龯龮龫龨龥龤龢龞views龓龑龍龰龯龌龴龊龓龑龈龆龂龨龊齾龞CSS齹齷龍齴齳龢齲龂齱龮龞齯齮齪龴龊齹齷龤龞css齧齣齠齞300齖龍齕龳龍齒齑龞齐齌齈龮齆齄龨龊齾龞CSS齂齁齀鼽鼹CSS Grid——鼬鼪龳CSS鼧鼥齪龴龊鼤鼢鼡鼟鼞鼚鼖鼒鼏龞鼎龍鼋鼊鼪鼉鼈鼆龨龊鼄鼃龍龌龂龥鼂鼀黾龍龰龯齴龮龴龨龥龞黼黸龤黷黳CSS鼧鼥龤龞齆鼡龍龢龨龊黲黮龞龆黪黩黨齪黦黤齳龞黣黢鼒龥黡鼉鼈 黠點齹黜

黚黗龍黔龨黑黐齌黏齪 齒黌黉黅黁齈黐齌CSS鼧鼥 龍龴麿麽Chrome麱Safari麱Firefox麱Opera麠Edge齈麙麘CSS鼧鼥齪黡鼉鼈龮齹黜龤麕麓龴麑麍鼥龞麋麉齪龳龞龍龫麆黉黅黁龤麅麃IE龍鹻龌鹹鹸龮鹷鹴鹲鹱鹯龂Edge鹮鹫鹪齧IE齪鹩龤Edge 16龳龮2017鹴10鹞16鹛鹱鹯龞龍鹻鹗龍鼟鼞黡龞Edge鹕鹓鹑鹐鹎鹍鹊龫龨龥鹉鹇鹊龞鹃鼞龞鼎龍黡鹕鹀鼚鸽鸹黡龞windows鹫龍齴Edge鸽鸹麓鸴齾鸰鸭齖齪

鹩鸪龍齱龮鸧黤CSS鼧鼥鼆鹱麙麘鸴鸤龞龳Firefox龍齳麃鼄黪龌CSS鼧鼥鼆鹱鸧鸢龞debug鸝鹑齪龴龊龮鸜鸘龞齐齌龤鸕鼏麓齪龰鼤鸔鸒黢鹲鸑鼆鹱鸍齈鸋鸉鹮Chrome龍鸇鸅鼈鸘Chrome鼬龨鸄鸕龮Css鼧鼥debug龫麃鹉鸁鷿龍齕龳龍鷽鷼齱龮龍鷺黡鷹鹮Firefox 56鼈龫龞鸰鼋鹫鷳鷯鼋龥龤龞鷮齮齪

鷪鷧龍龴龨龥龞齐齌龰龯鸕鹮麓 Codepen 龍龴龳龨龊鷦鹎黌齖龞龮鷤鹲鸑鹇鹊鷡鷝齪鷙龰龯黗鹫鷖鷕龨龊pen龍鷑鸘鷎鷍js鷉龆鷅龍鹻龌龰龯鹓鹀鼚鹮麓齳齪

黗鷙龰龯鹫鷂鷀鶽齖鶻鶹龞html鼹

<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2
    <p class="sub-item"></p>
  </div>
  <div class="item item-3">3</div>
</div>

鷑鸘龌item鷂鷀龨鼡齯鶤龍鷙龰龯鹑鶡鶝黣鶚鶙鼹

.item {
  background: #D8D8D8;
  border:thin #adadad solid;
}

鶀鵾龍龌龂鷹鹮CSS Grid龍黡鹀鼚鵺鵶龊鵵鵱鵭鵪鼟龴鵦龞container鵣龞Display鵠黏鵟鵞龌grid龍鼈鵚鵗黉黅黁龍龴龊鵵鵱鵕鹩齐鵒龞鹉麃鵏鶀龞齮鵵鵱鵭齕龳鹓鵍鵕麓齮鵵鵱龤龞齮鵵鵱鵣齈鼈鼧鼥龞鵌鶤鹫鹯鵋鼹

display:grid;

鹩龤龍龴龊鵵鵱鵈鵇龌鼧鼥齌黁龍齳齐鵒龞鹉麃齮鵵鵱鵭鹓麿麽齮鵵鵱龤龞齮鵵鵱鵣鵈鵇龌鼧鼥鵄齪

龫鵁龞齧齣龤龍container龳鼧鼥齌黁龍item-1麱item-2麱item-3龳鼧鼥鵄齪sub-item鼪鹓龳鼧鼥鵄齪

grid-template-columns: 100px 100px 100px 100px 100px 100px;  /* 6栏 */
  grid-template-rows: 100px 100px 100px; /* 3行  */

鶀鵾龌鼧鼥鸄鴽鵌鴻龍龴鵦鸄鴽龞龳龨龊6鼃3齖龞鼧鼥龍鴷龨龊鴶鴲龞鴱麠鴭齈龳100鴬鵱龍鷑鸘龌龂鸤鶡龍龰龯鴨鼧鼥鵟鵞龨龊鴱鴧龍鴣鸅鷙齳鴢龤齪

龰龯鹫黠鶡鵵鵱龍黡鼉鼈鶡麓龮container龞display鵠黏龞鴠鴝麃龨龊鼧鼥鴛鴗龍鼡鴖齳龍鼪鹑龮鴔鵁龫鹍鹊鴒龴龊鼧鼥龞鴝鴎鷤龍黡鼉鼈鶡麓龴龳龨龊6鼃3齖龞鼧鼥齪鴍鼀龍黡鼬鸢鴌鼉鼈鶡鴒龍鼧鼥鷳鴉龫龳龨龊鴇鴃龞鳿鳽龍鼟鼞鹓鼆鳺鼧鼥鳹鳶鷤龞鼎龍黡鸒鳴鼤鸔鼧鼥龳鳲鳮齯齮龞齪

鷑鸘龰龯鵺鷙鼧鼥鴢龤龞齯鶤鳫鳧龍齆齾鸄鴽龨鸪鼧鼥齪龴鵦龰龯龈龆龂龨龊齾龞鶹鳥龍fr——齳龞鳤鴽鳢鳡黤鳟鳛龍鼟鼞龨鼃鳗1fr鼬鼪龳1鳕龞鼎龍3鼃鼪龳3鳕鷡鳒鳟龍6鼃鼪龳鳐鳕鷡鳒鳟齪齳鹑鳌麃齳鹉鹑鳌麃龞鸴鳊龞鳆黾齪鹻鹗龍齱龮龴龊鼧鼥鳌鳂龂鳁龊黉黅黁龞鲽鲼鳆黾鴣鸅鵈鷡鳒鳟齲龂6鳕齪齕龳龍龰龯鴣鹓龨鸄鷙鴷龨鼃齈鲻鳌麃1鳕龍鼟鼞鷪龨鼃鳌麃鹷鳕龞鼎龍鲷鼪鲶黤龳龨鲲鵺黉黅黁龞鴱鴧鳟齲7鳕龍鷪龨鼃鳌麃2鳕龍鹩鲯鴷龨鼃龨鳕齪

龰龯鴣麅麃龌3龊鼧鼥鵄鵟鵞鴱鴧麠鴭鴧龍齕龳龍鲭鳂鲯龯龞鲪鲨鲧鲦鲣鲨龍黡鼉鼈鶡麓龍鲯龯齈鳌鳂龂鳁龊鼧鼥齪龰龯鼉鼈鷹鹮justify-items麠align-items鹫鲢鳁鼧鼥鵄龮鼧鼥龤龞鸧鲞鲝鶤龍鵪鼟鼹

 justify-items:center;
 align-items: center;

鼉鼈鷙鴷龨龊鼧鼥鵄龮鼧鼥鵦鴢龤齪

鲚鹗鴍鼀龍龰龯鹕鼉鼈鲢鳁鵶龨龊鼧鴶鵄龍鷙鲯麃鲘鲖龞鸧鲞鲝鶤鼹

.item-3{
 justify-self:end;
 align-self:end;
}

鼈龫4龊鵠黏齈麃4龊鹓鴍龞鲒鼉鲑黳鲍龍鳟鲊龳start麱center麱end麠stretch齪黡鼉鼈鴲鲈鲄龨鲄鹓鴍龞鲃鼞齪龮麅麃鵟鵞龞鼀鲂龍鲯龯龞鱾鱺鲒龳stretch龍鼬鼪龳鱷鱶齪justify-self麠align-self鸕鱵鱴鱲justify-items麠align-items龞鲒齪黡鸕鹱齱鱮鱫鷹鹮龴鶽龊鵠黏龍鼉鼈鸒鱪鱦龞鷳齱鱢鵏鴢龤麠鱞鷡鴢龤齪

鶀黑鹫龞龨龊齆鼚齀鼽龳鼧鼥鷤龍齳鼪龳鱚齲鼧鼥龞鷤龍鱖龫麓黑龍鱖鱓麓鱐龍齈龳鱖1鼆鱍鷿齖鱊鴗龍鷑鸘鱉鸪鱅鱃齪

鱚齲鼧鼥龞鷤龍鱖龫麓黑龍鱖鱓麓鱐龍齈龳鱖1鼆鱍鷿齖鱊鴗龍鷑鸘鱉鸪鱅鱃齪

鰿鹮鼧鼥鷤龍龰龯鼉鼈龌鼧鼥鵄鷿齖鸄鳥鰼鸰龍鵪鼟龰龯鼉鼈鵺鼧鼥鵄龞鷪龨鵄鸄鳥麓鷪5麠鷪6鲭鰸鷤龞龤黾龍鷪3麠鷪鰶鲭鰴鷤龤黾齪龰龯鲻鼚龴鳮鰱鰭鼉鼹

.item-1{
  grid-column: 5 / 6;
  grid-row: 3 / 4;
}

龴鵦龞3麠5鳟鲊齧麍鼧鼥鷤龞鼆鱍龍4麠6齧麍鲃鰪齪

鷙龰龯鵺鷪龨鵄鵟鵞龌鱷鱶龍龴齯龍鼉鼈黣鸤龞鶡麓齳龮鼧鼥龤龞鳥鵞齪

justify-self:stretch;
  align-self:stretch;
  background:red;

鶀鵾龰龯鼉鼈鰨鰤鰠鰜鼧鼥鷤鼆鱍麠鲃鰪龞鲒龍龰龯鼉鼈鷙鷪龨鵄鰙鰗黢龊鼧鼥龍鵪鼟鼹

grid-column: 4 / 6;
  grid-row: 2/ 4;

龴齯龍鷪龨鵄齱龮鼪鰙鰗龂4龊鼥齮齪鹗鼀鼟鼞龰龯鳫鳧鱷鱶龞鵠黏龍鲷鳮鷪龨鵄鼪鸕鰓鰑鹲鵁鵟鵞龞鲷齯鼈鴢鰐龞鲝鶤龮龴4龊鼥齮龤鸄鳥齪

鷑鸘龍黡鹕鹀鼚鼤鸔龞龳龍鼧鼥龤鹕鼉鼈鰎鰊鹩鲯龞鼧鼥龍黡鲻鼚鵺鵶龊鼧鼥鵄龞display鵠黏鵟鵞龌grid龍鼪鼉鼈龮龴龊鼧鼥鵄鵦鵁鸄鴽龨龊齾龞鼧鼥齪

鼈黑龳鼋龥齐齌龤CSS齧齣龞鸴鸘鸰鼋鼹

.item {
  background: #D8D8D8;
  border:thin #adadad solid;
}

.container{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;  /* 6栏 */
  grid-template-rows: 100px 100px 100px; /* 3行  */
  justify-items:center;
  align-items: center;
}

.item-3{
 justify-self:end;
 align-self:end;
}

.item-1{
  grid-column: 4 / 6;
  grid-row: 2/ 4;
  justify-self:stretch;
  align-self:stretch;
  background:red;
}

鰆鰑鼈龫齧齣麠黔鰃龍黡龮鰀齞鯽鹫鶡龫龨龥龤龞CSS齧齣鼪鸢鴌鹓鸕麃鳲鳮鳊鯼鯸龂齪鴣鸅龍黡鸕鹱齱龫龨龥龤龌views鯷麍龞鴷龨鵄鷂鷀鯵鳛黁class龞鯳鹻齪

本书共56小节:

评论 (1)