基础篇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龚鮸鹓齖

本书共76小节:

评论 (1)