https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-template-columns <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>grid-template-columns</title> <style type="text/css"> #grid { display: grid; width: 100%; grid-template-columns: 350px 1fr; } #areaA { background-color: lime; } #areaB { background-color: yellow; } </style> </head> <body> <div id="grid"> <div id="areaA">A</div> <div id="areaB">B</div> </div> </body> <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> --> </html> 提示：你可以先修改部分代码再运行。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Grid Responsive Perspective layout</title> <style type="text/css"> body { margin: 50px; color: #16302B; background-color: #A3A866; font-family: 'Lato', sans-serif; } h2, h3 { font-family: 'Montserrat', sans-serif; } h1 { font-family: 'Slabo 27px', sans-serif; color: #DAFFFD; text-align: center; font-size: 2.5em; margin: 0 0 65px 0; } h2 { font-size: 1.6em; margin: 0 30px 5px 30px; text-transform: uppercase; } h3 { font-size: 0.9em; margin: 0 30px 5px 30px; text-transform: uppercase; } p { margin: 0 30px 0 30px; } #grid { margin: auto; width: 90vw; display: grid; grid-row-gap: 15px; grid-template-columns: repeat(auto-fill, minmax(350px,1fr)); } .smallgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; } .textHolder { position: absolute; top: 50%; transform: translateY(-50%); } .odd > .desc{ background-color: #DAFFFD; z-index: 4; width: 112%; margin-left: -10.5%; transform: perspective(1000px) rotateY(-30deg); grid-column: 1 / 3; grid-row: 1 / 2; text-align: right; } .odd > .desc > .textHolder{ right: 0; } .even > .desc{ z-index: 2; background-color: #6BC1BC; width: 112%; transform: perspective(1000px) rotateY(30deg); grid-column: 2 / 4; grid-row: 1 / 2; } .even > .photo{ z-index: 3; width: 150%; margin-left: -23%; transform: perspective(1000px) rotateY(-45deg); grid-column: 1 / 2; grid-row: 1 / 2; } .odd > .photo{ z-index: 5; width: 150%; margin-left: -25%; transform: perspective(1000px) rotateY(45deg); grid-column: 3 / 4; grid-row: 1 / 2; } img { display: block; width: 100%; } </style> </head> <body> <h1>Pitchfork's Top 40 Albums of the 1990s</h1> <div id="grid"> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>001: Radiohead</h3> <h2>OK Computer</h2> <p>[1997 / Capitol]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/01.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>002: My Bloody Valentine</h3> <h2>Loveless</h2> <p>[1991 / Creation]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/02.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>003: The Flaming Lips</h3> <h2>The Soft Bulletin</h2> <p>[1999 / Warner Bros]</p></div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/03.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>004: Neutral Milk Hotel</h3> <h2>In the Aeroplane Over the Sea</h2> <p>[1998 / Merge]</p></div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/04.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>005: Pavement</h3> <h2>Slanted and Enchanted</h2> <p>[1992 / Matador]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/05.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>006: Nirvana</h3> <h2>Nevermind</h2> <p>[1991 / DGC]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/06.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>007: DJ Shadow</h3> <h2>...Entroducing</h2> <p>[1996 / Mo'Wax]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/07.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>008: Pavement</h3> <h2>Crooked Rain, Crooked Rain</h2> <p>[1994 / Matador]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/08.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>009: Bonnie "Prince" Billy</h3> <h2>I See a Darkness</h2> <p>[1999 / Palace]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/09.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>010: Guided By Voices</h3> <h2>Bee Thousand</h2> <p>[1994 / Scat]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/10.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>011: Talk Talk</h3> <h2>Laughing Stock</h2> <p>[1991 / Polydor]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/11.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>012: Slint</h3> <h2>Spiderland</h2> <p>[1991 / Touch & Go]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/12.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>013: Nirvana</h3> <h2>In Utero</h2> <p>[1993 / DGC]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/13.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>014: Belle And Sebastian</h3> <h2>If You're Feeling Sinister</h2> <p>[1996 / Jeepster]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/14.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>015: Radiohead</h3> <h2>The Bends</h2> <p>[1995 / Capitol]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/15.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>016: The Dismemberment Plan</h3> <h2>Emergency & I</h2> <p>[1999 / DeSoto]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/16.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>017: Public Enemy</h3> <h2>Fear of a Black Planet</h2> <p>[1990 / Def Jam]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/17.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>018: Smashing Pumpkins</h3> <h2>Siamese Dream</h2> <p>[1993 / Virgin]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/18.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>019: Beck</h3> <h2>Odelay</h2> <p>[1996 / DGC]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/19.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>020: Björk</h3> <h2>Post</h2> <p>[1995 / Elektra]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/20.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>021: Björk</h3> <h2>Homogenic</h2> <p>[1997 / Elektra]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/21.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>022: Built To Spill</h3> <h2>Perfect From Now On</h2> <p>[1997 / Warner Bros.]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/22.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>023: The Beta Band</h3> <h2>The Three EPs</h2> <p>[1999 / Astralwerks]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/23.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>024: Built To Spill</h3> <h2>There's Nothing Wrong With Love</h2> <p>[1994 / Up]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/24.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>025: Yo La Tengo</h3> <h2>I Can Hear the Heart Beating As One</h2> <p>[1997 / Matador]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/25.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>026: Weezer</h3> <h2>Weezer (Blaues Album)</h2> <p>[1994 / DGC]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/26.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>027: Guided By Voices</h3> <h2>Alien Lanes</h2> <p>[1995 / Matador]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/27.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>028: Pixies</h3> <h2>Bossanova</h2> <p>[1990 / 4AD]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/28.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>029: Modest Mouse</h3> <h2>The Lonesome Crowded West</h2> <p>[1997 / Up]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/29.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>030: Liz Phair</h3> <h2>Exile In Guyville</h2> <p>[1993 / Matador]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/30.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>031: Wilco</h3> <h2>Summerteeth</h2> <p>[1999 / Reprise Records]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/31.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>032: The Notorious B.I.G.</h3> <h2>Ready to Die</h2> <p>[1994 / Bad Boy]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/32.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>033: Nas</h3> <h2>Illmatic</h2> <p>[1994 / Columbia]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/33.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>034: Beastie Boys</h3> <h2>Check Your Head</h2> <p>[1992 / Grand Royal]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/34.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>035: Boards Of Canada</h3> <h2>Music Has the Right to Children</h2> <p>[1998 / Warp]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/35.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>036. Wu-Tang Clan</h3> <h2>Enter the Wu-Tang (36 Chambers)</h2> <p>[1993 / Loud]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/36.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>037: The Magnetic Fields</h3> <h2>69 Lovesongs</h2> <p>[1999 / Merge]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/37.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>038: Jesus Lizard</h3> <h2>Goat</h2> <p>[1991 / Touch & Go]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/38.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>039: Olivia Tremor Control</h3> <h2>Dusk at Cubist Castle</h2> <p>[1996 / Flydaddy]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/39.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>040: Aphex Twin</h3> <h2>The Richard D. James Album</h2> <p>[1996 / Warp]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/albums/40.jpg"></div> </div> </div> <!-- Data: http://www.indiepedia.de/index.php/Top_100_Albums_of_the_1990s_(Pitchfork,_2003) Images: https://www.discogs.com/lists/Pitchfork-Best-Albums-of-the-90s/8539 41. Yo La Tengo – Painful (1993 / Matador) 42. Fugazi – Red Medicine (1995 / Dischord) 43. R.E.M. – Automatic for the People (1992 / Warner Bros.) 44. Boredoms – Super Ae (1998 / Birdman) 45. Godspeed You Black Emperor! – F# A# Infinity (1998 / Kranky) 46. Air – Moon Safari (1998 / Astralwerks) 47. Oval – 94diskont (1995 / Thrill Jockey) 48. Portishead – Dummy (1994 / Go! Discs) 49. Tom Waits – Bone Machine (1992 / Island Records) 50. Outkast – Aquemini (1998 / LaFace) 51. Stereolab – Emperor Tomato Ketchup (1996 / Elektra) 52. PJ Harvey – Rid of Me (1993 / Island Records) 53. Weezer – Pinkerton (1991 / DGC) 54. Blur – Parklife (1994 / SBK) 55. Spiritualized – Ladies and Gentlemen, We Are Floating in Space (1997 / Dedicated) 56. A Tribe Called Quest – The Low-End Theory (1991 / Jive) 57. Brainiac – Bonsai Superstar (1994 / Grass) 58. Jesus Lizard – Liar (1992 / Touch & Go) 59. Elliott Smith – Either/Or (1997 / Kill Rock Stars) 60. Palace Music – Viva Last Blues (1995 / Drag City) 61. Pulp – Different Class (1995 / Island Records) 62. Aphex Twin – Selected Ambient Works, Vol.II (1994 / Warp) 63. De La Soul – De La Soul Is Dead (1991 / Tommy Boy) 64. The Breeders – Last Splash (1993 / 4AD) 65. Daft Punk – Homework (1997 / Virgin) 66. Tricky – Maxinquaye (1995 / Island Records) 67. Mouse On Mars – Iaora Tahiti (1995 / Too Pure) 68. Elliott Smith – XO (1998 / Dreamworks) 69. Jeff Buckley – Grace (1994 / Columbia) 70. Jawbox – For Your Own Special Sweetheart (1994 / Atlantic) 71. Dr. Octagon – Octagonecologyst (1996 / Dreamworks) 72. Silver Jews – American Water (1998 / Drag City) 73. Brainiac – Hissing Prigs in Static Couture (1996 / Touch & Go) 74. Ride – Nowhere (1990 / Sire) 75. A Tribe Called Quest – Midnight Marauders (1993 / Jive) 76. Mercury Rev – Deserter's Songs (1998 / V2) 77. Primal Scream – Screamadelica (1991 / Sire) 78. Stereolab – Mars Audiac Quintet (1994 / Elektra) 79. Dr. Dre – The Chronic (1992 / Death Row) 80. The Pharcyde – Bizarre Ride II The Pharcyde (1992 / Delicious Vinyl) 81. The Breeders – Pod (1990 / 4AD) 82. Sonic Youth Goo (1990 / DGC) 83. Pixies – Tromple le Monde (1991 / 4AD) 84. Company Flow – Funcrusher Plus (1997 / Rawkus) 85. Massive Attack – Blue Lines (1991 / Virgin) 86. Destroy – City of Daughters (1998 / Triple Crown) 87. GZA/Genius – Liquid Swords (1995 / Geffen) 88. Wilco – Being There (1996 / Reprise Records) 89. Squarepusher – Music Is Rotted One Note (1999 / Warp) 90. Cocteau Twins – Heaven or Las Vegas (1990 / 4AD) 91. Tortoise – TNT (1998 / Thrill Jockey) 92. Scott Walker – Tilt (1995 / Drag City) 93. Bob Dylan – Time Out Of Mind (1997 / Columbia) 94. Frank Black – Teenager of the Year (1994 / 4AD) 95. Massive Attack – Mezzanine (1998 / Virgin) 96. Herbert – Around the House (1998 / !K7) 97. Mogwai – Young Team (1997 / Jetset) 98. KMD – Mr. Hood (1991 / Asylum) 99. Raekwon – Only Built 4 Cuban Linx (1995 / Loud) 100. The Orb – The Orb's Adventures Beyond the Ultraworld (1991 / Big Life) --> </body> <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> --> <script type="text/javascript"> function alternate(){ colsno = window.getComputedStyle(document.getElementById("grid")).gridTemplateColumns.split(' ').length; smallgrids = document.getElementsByClassName("smallgrid"); for(i=0;i<smallgrids.length;i++){ thisrow = Math.floor(i/colsno); thiscol = i%colsno; if((thisrow+thiscol)%2==1){ smallgrids[i].setAttribute('class', 'smallgrid even'); }else{ smallgrids[i].setAttribute('class', 'smallgrid odd'); } } } window.onload = alternate(); window.addEventListener("resize", alternate); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » grid-template-columns 喜欢 (0)or分享 (0)
