基础篇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龚鯀鹇齕

本书共42小节:

评论 (1)