CSS網格效果問題

Question

我需要創建一個網格... 一些幫助，我想使它看起來像這個網站： https://www.domo.com/company/executives

這裏是查看網頁的源文件時，基金： http://jsfiddle.net/o45LLsxd/

<div ng-view="" class="ng-scope"><div class="biogrid ng-scope"> 
<!-- ngRepeat: executive in notSorted(executives) --><div ng-repeat="executive in notSorted(executives)" ng-init="executive = executives[executive]" class="ng-scope"> 
<div class="biogrid-tile active" id="joshjames" biotile=""> 
    <img src="https://www.domo.com/assets/images/executives/josh-james.jpg" alt="Josh James"> 
    <div class="biogrid-info"> 
     <div class="biogrid-name ng-binding">Josh James</div> 
     <div class="biogrid-title ng-binding">Founder, CEO &amp; Chairman of the Board</div> 
     <div class="biogrid-handle ng-binding"> 
      <i class="icon-domofont-twitter-reg"></i> @joshjames 
     </div> 
    </div> 
    <div class="biogrid-bio"> 
     <div class="biogrid-name ng-binding">Josh James</div> 
     <div class="biogrid-title ng-binding">Founder, CEO &amp; Chairman of the Board</div> 
     <div class="biogrid-handle ng-binding"> 
      <i class="icon-domofont-twitter-reg"></i> @joshjames 
     </div> 
     <p class="ng-binding">Josh founded Domo in 2010 to help CEOs and other leaders change the way they do business and obtain value from the tens of billions of dollars spent on traditional business intelligence systems. Before founding Domo, Josh was the CEO of Omniture, which he co-founded in 1996 and took public in 2006; and from 2006-2009, he was the youngest CEO of a publicly traded company.</p> 
     <div class="hidden-bio ng-binding">&lt;p class='bio-intro'&gt;Josh founded Domo in 2010 to help CEOs and other leaders change the way they do business and obtain value from the tens of billions of dollars spent on traditional business intelligence systems. Before founding Domo, Josh was the CEO of Omniture, which he co-founded in 1996 and took public in 2006; and from 2006-2009, he was the youngest CEO of a publicly traded company.&lt;/p&gt;&lt;p&gt;Omniture was the number one returning venture investment out of 1,008 venture capital investments in 2004, as well as the number two performing technology IPO of 2006. Omniture was also the fastest or second fastest-growing public company for three consecutive years. In 2009, Josh facilitated Omniture's $1.8 billion sale to Adobe.&lt;/p&gt;&lt;p&gt;Josh serves as a member of the World Economic Forum's Young Global Leaders, a worldwide community of individuals committed to, and recognized for, their proven leadership and potential in shaping the future.&lt;/p&gt;&lt;p&gt;In 2012, the Utah Tech Council inducted him into its Hall of Fame and Mountain West Capital Network named Josh its Entrepreneur of the Year. In 2011, Fortune Magazine recognized him as one of its "40 Under 40: Ones to Watch" and, in 2009, as one of its "40 Under 40" top business executives. He was named the 2006 Ernst &amp; Young Entrepreneur of the Year and Brigham Young University's Technology Entrepreneur of the Decade.&lt;/p&gt;&lt;p&gt;Josh is the founder of CEO.com, a resource to help founders and CEOs stay up to date with what's happening at the executive level across top industries, as well as stay armed with the latest leadership strategies and best practices. He also founded Silicon Slopes, a non-profit initiative designed to promote the interests of Utah's high-tech industry.&lt;/p&gt;&lt;p&gt;Josh has six daughters.&lt;/p&gt;</div> 
     <a href="#joshjames" class="btn btn-link">read more</a> 
    </div> 
</div> 

我想獲得CSS，但它似乎像他們使用的AngularJs，我從來沒有合作過;我是一個小白btw ...

所以我關心的是如何使用html，css和js ...或AngularJs來製作網格，如果你能告訴我它是如何工作的。感謝那些幫助我解決問題的人:)

Answer 1

您可以使用CSS vw單位。看看this fiddle。

HTML

<div id="grid"> 
    <div class="cell"></div> 
    <div class="cell"></div> 
    <div class="cell"></div> 
    <div class="cell"></div> 
    <div class="cell"></div> 
</div> 

CSS

body, html{ 
    padding: 0; 
    margin: 0; 
    overflow-y: hidden; 
} 

#grid { 
    width: 100%; 
    text-align: left; 
    overflow: hidden; 
} 

#grid .cell { 
    width: 33.333333vw; 
    height: 33.333333vw; 
    background: white; 
    float: left; 
    -webkit-box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.4); 
}