The problem with the CSS Grid effect

Looking for assistance in creating a grid layout similar to the one on this website:

Upon inspecting the page source, I found the following code snippet: 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>

I have limited experience with AngularJS, so I'm struggling to extract the CSS for the grid layout. I primarily work with HTML, CSS, and vanilla JS. Any guidance on how to achieve a similar layout using these technologies would be greatly appreciated. Thanks to everyone assisting me with this challenge :)

Answer №1

You Have the Ability to Achieve This Using CSS and the vw unit. Check out this example.

HTML Code:

<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 Styling:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to acquire multiple responses for a single callback function from multiple requests

I have developed a calculator web application using node.js with express. My goal is to create buttons for addition, subtraction, multiplication, and division operations. While my POST request works fine with a single res.send(), I encountered an issue whe ...

Using MVC to create dynamic JavaScript functions that call actions

Having trouble with dynamic JavaScript onchange event not firing in my application. Here's the code snippet from my action result: public ActionResult About() { ViewBag.Script = "<input type='text' name='myName&a ...

Maintain the selected bootstrap tab even after the page is refreshed, even when the content is loaded dynamically

I am currently facing an issue with loading tabs using Angular. Whenever a tab is clicked, the id is saved to localStorage. Now, I want to programmatically click on the same tab using jQuery when the page refreshes. However, since the DOM element for the ...

What is the best method in Selenium IDE for tracking an element based on its value?

While testing a website with Selenium IDE, I encountered an issue with the way elements are identified. The site utilizes something called "wickets" that change the ID of elements randomly, making it difficult for Selenium to record actions on certain elem ...

Create unique identifiers for the TD elements of Viz.js that will be displayed within the SVG elements

Below is the DOT code snippet in Viz.js that I am working with: digraph G { node [fontname = "font-awesome"]; 17 [id=17, shape="hexagon", label=<<TABLE BORDER="0"> <TR><TD>undefined</TD></TR> <TR><TD>[47-56]< ...

Is there a way to verify the presence of data returned by an API?

I am trying to implement a system in my Index.vue where I need to check if my API request returns any data from the fetchData function. Once the data is fetched, I want to return either a boolean value or something else to my Index.vue. Additionally, I wou ...

The process of integrating a Loader in Javascript

I am in need of a simple "page loading" animation while my photo is being uploaded. Unfortunately, when I tried using the "blockUI" JavaScript for this purpose, it didn't seem to work with my form. For uploading the image, I have employed a div as a ...

How to display JSON containing nested objects in AngularJS using the ng-repeat directive

Hey everyone, I have this JSON external file that I need help with: { "success":true, "errors":[ ], "objects":[ { "cod":"8211300", "descricao":"Serviços advocatícios" }, // more objects here... ] } In ...

Create custom components by wrapping npm components and exporting them as a single custom component

Encountering issues while installing 3rd party components from npm. For instance, a dropdown react module that can be used easily in my own module; however, I find myself needing to declare its style and other dependencies in multiple modules. For example ...

Transferring a row name from PHP to AJAX using jQuery - the complete guide

In my current project, I have a table that displays details fetched from the database. if(mysql_num_rows($sql) > 0) { $row_count_n = 1; while($rows = mysql_fetch_assoc($sql)) { extract($rows); $options1 = select_data_as_options( ...

Displaying a table in Chrome/Firefox with a mouseover feature

Hovering over the rows of this table triggers a display of descriptions. html: <tr title="{{transaction.submissionLog}}" class="mastertooltip">... JavaScript: $('.masterTooltip').hover(function(){ // Hover functionality ...

The datepicker in Angular UI is displaying incorrect dates

Currently, I am developing an application using Angular and incorporating Angular UI. One of the features I have implemented is a datepicker that is coded like this: <input type="text" ng-required="true" name="targetDate" uib-date ...

Ways to retrieve HTML tags from a website's DOM and shadowDOM

I am currently working on a project using NodeJS where I need to extract the HTML structure of multiple websites. However, I am facing some challenges with this task. My goal is to retrieve only the HTML structure of the document without any content. It is ...

How can I add a channel to a category using await(discord.js)?

Having trouble organizing a new channel within a category. The .setParent(categoryID) method seems to only work with existing channels, causing an issue when I attempt to execute my code. Take a look at the code snippet below: client.on("message" ...

Updating AngularJS scope does not occur when a value is selected using jQuery

When writing a test using cucumber and selenium, I encountered an issue with a dropdown selection. After selecting a value using jQuery, pressing next resulted in an error. The problem seems to be that Angular has not updated its scope properly. <sele ...

Utilizing Material-UI List components within a Card component triggers all onClick events when the main expand function is activated

Need help with Material-UI, Meteor, and React I am trying to nest a drop down list with onTouchTap (or onClick) functions inside of a card component. While everything renders fine initially, I face an issue where all the onTouchTap events in the list tri ...

Exploring an array of JSON data with HandlebarsJS and BackboneJS

My goal is to showcase a collection of music artists organized by the first letter of their name. This is how I have set up my Backbone View: function (App, Backbone, utils) { // Define a new module. var AllArtists = App.module(); // Create ...

Prepare for a thorough cross-referencing session

In my attempt to create a tool with 3 inputs that are interdependent - "Earn %", "Earn $" and "Own Price". Initially, the default value for "Earn percentage" is set at "10", making the initial calculation function as intended. Changing this one value auto ...

Press the AngularJS button using just JavaScript and the element

I've been developing a browser extension that automatically clicks buttons on web pages, but I've run into an issue with sites using AngularJS. The code functions properly on most websites except for those built with AngularJS. Below is the snip ...

Create PDFs using PhantomJS when the HTML content is fully loaded and ready

I am a newcomer to utilizing phantomjs and encountering difficulties in rendering my website as a PDF file. Although I can successfully render a simple version of the page, issues arise when multiple images and web fonts are involved, causing the DOM not t ...