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

How can you use JavaScript regex to verify that the last three characters in a string are

What method can be used to confirm that a string concludes with precisely three digits? accepted examples: Hey-12-Therexx-111 001 xxx-5x444 rejected examples: Hey-12-Therexx-1111 Hey-12-Therexx-11 Hey-12-Therexx 12 112x ...

Button from Bootstrap extends beyond the page on mobile devices

I am facing an issue with my button. It looks great on desktop, but when I switch to the mobile version, it goes beyond the screen width like in the image below: 1) How can I prevent this from happening with the code provided in my bootply? 2) Also, how ...

Angular encountering injector error yet still successfully returning variables

It seems like I am facing a simple problem that I might be overlooking, as I have similar functions working fine in other controllers. However, for some reason, I'm encountering this error: Error: [$injector:unpr] Unknown provider: tourinfoProvider & ...

The Angular filter received an undefined value as the second parameter

Currently, I am facing an issue while trying to set up a search feature with a custom filter. It appears that the second parameter being sent to the filter is coming through as undefined. The objects being searched in this scenario are books, each with a g ...

Unable to send event from JavaScript to Component in Ionic

My goal is to notify a component that a script file has finished loading. My approach involves using the onload event of an element to dispatch an event. A service will then register an event listener for this event, waiting for clients to subscribe to an ...

The initial row's Id will be used as the Id for all subsequent rows within a JSON object

After dragging a tr in a table and confirming by clicking a button, I need the order list to be updated in the database. To achieve this, I created a JSON object where I intend to save the ids and their corresponding new orders. The issue I am facing is t ...

The `background-size` property in jQuery is not functioning as expected

I am facing the following issue: When I click on a div with absolute positioning, I want to animate its position, width, and height. In addition, I want to change the background-size using jQuery. However, the problem is that all CSS properties are updat ...

CSS animations can make the navigation bar vanish into thin air

I recently started implementing CSS3 animations from the Animate.css library and I must say, they really enhance the look and feel of my website. The animations pair perfectly with WOW.js to create stunning effects. However, I have encountered a minor iss ...

AngularJS Incorrectly marked checkbox

I am encountering an issue with a template using AngularJS. The template displays a list of books with checkboxes for performing batch actions such as deleting the books. If the list gets too long, the books are paginated. The problem arises when I check ...

Storing keys and multiple maps with React applications

Having a multiple array with an option set created, everything is functioning correctly const groups1 = OrgServices.reduce((all, cur) => ((all[cur.grouptype] ??= []).push(...cur.servicetype), all), {}); const output1 = Object.entries(groups1).map ...

Tips for ensuring only one property is present in a Typescript interface

Consider the React component interface below: export interface MyInterface { name: string; isEasy?: boolean; isMedium?: boolean; isHard?: boolean; } This component must accept only one property from isEasy, isMedium, or isHard For example: <M ...

Challenges related to maintaining a webpage's content using AJAX

I have a form that I want to use to send and insert the values into my database. After the values are inserted, I would like to clear the input fields of the form and display a success message. Here's an example of how I would like it to look: Clear ...

The Vue.js error message "Unable to access property 'array_name' as it is undefined" indicates an issue with

I'm currently working on fetching data using Axios requests and storing it in an array. Below is the code I have been using: props: [ 'products', ], data: function () { return { algolia: '', pro ...

Creating a design with two divs split by a diagonal line using CSS

Is there a way to make two divs span the full width of the page while being divided in half by a diagonal line using CSS? I am working on a slider and once completed, I need to add content to both parts. Any ideas on how to accomplish this with two divs? ...

Every time I attempt to build a React application, I encounter the same error message. I even checked the log file, but it keeps showing the proxy error

An error occurred in the command prompt while installing packages. This process may take a few minutes. Installing react, react-dom, and react-scripts with cra-template... Error: ERR_SOCKET_TIMEOUT The network encountered a socket timeout while trying to ...

What is the default delay when utilizing the $timeout function in AngularJS?

While looking at the concise information on the AngularJS $timeout documentation page, I noticed that the 'delay' argument is listed as optional. However, when utilizing $timeout without specifying a delay, I observed that a delay is still implem ...

Firefox presents a compact box positioned between the images

When attempting to use flags as a way to switch between languages, I encountered an issue in Firefox where a small box appears between the images on the Hebrew site. In Chrome, everything works fine. I implemented the following code: <div class="flags ...

Displaying only the div after the link from a table where all divs are shown using jQuery

I'm struggling to figure out how to select the immediate div inside each td and properly load up the page. Each link seems to toggle every hidden div on the page! The table contains hundreds of rows, with each row featuring a visible part - a link - ...

Is it possible to continuously stream the latest data from my xammp server directly into my console log without relying on the set Interval function?

Is there a way to have the data automatically reflect updates in the database without relying on the setInterval function? var dataUpdate = setInterval(updateData, 1000); function updateData() { $http.get('URL CALL', { params: { ...

Unable to create service despite being in loaded state

This code represents the core module: (function() { "use strict"; angular .module('wda', [ /* Angular modules */ 'ngRoute', /* 3rd-party modules */ 'ui.bootstrap&ap ...