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); 
}