Angular Square Grid Design

Attempting to create a square grid layout using CSS for ng-repeat items.

Essentially, I am looking to have one big square followed by four smaller squares that combined have the same width and height as the big square.

Here is my CSS:

.container{
  width: 1398px;
}
.item{
            float: left;
            margin: 3px;
            overflow: hidden;

            width: 460px;
            height: 460px;
            background-color:black;
        }
        .item:nth-of-type(2n),
        .item:nth-of-type(3n),
        .item:nth-of-type(4n),
        .item:nth-of-type(5n) {
            width: 227px;
            height: 227px; 
        }
        .item:nth-of-type(4n){
            margin-left: -230px;
            margin-top: 236px;
        }
        .item:nth-of-type(5n){
            margin-left: -463px;
            margin-top: 236px;
        }

Everything works well until after the 5th element, then the grid breaks.

Fiddle: https://jsfiddle.net/enq1okge/4/

javascripthtmlcssangularjs

Answer №1

If you want to achieve a unique layout without relying on third-party libraries, consider using some nth-child trickery. While not foolproof, it can serve as a workaround in certain situations.

The basic idea is to reset the float on every 1st, 6th, 11th, 16th, and so forth elements, making them roughly twice the size of the others. This will require careful calculation based on the container's width.

In this scenario, you would use :nth-child(5n+1). After determining the selector, adjust the sizes accordingly. The larger elements should take up approximately half the container's width (container-width / 2), while the smaller ones should be one quarter of the container's width (container-width / 4).

Below is a simplified example snippet:

* { box-sizing: border-box; margin: 0; padding: 0; }
div.cont { 
width: 80vw; clear: both; margin: 8px auto;
}
div.item { 
float: left;
background-color: #33e; margin: 1px;
width: calc((80vw / 4) - 4px); height: calc((80vw / 4) - 4px);
}
div.item:nth-child(5n+1) {
width: calc((80vw / 2) - 6px); height: calc((80vw / 2) - 6px);
background-color: #e33; clear: left;
}
<div class="cont clearfix">
<div class="item"></div>
<div class="item"></div>
...
<div class="item"></div>
<div class="item"></div>
</div>

Feel free to experiment with this concept on a live fiddle: : https://jsfiddle.net/abhitalks/95rx53o6/

Note: By keeping the container's size in percentage or viewport-relative units and adjusting the children's size accordingly, you can ensure responsiveness in your design.

Answer №2

The correct application of css is as follows: 

.cont{
  width: 1398px;
}
.item{
  float: left;
  margin: 3px;
  overflow: hidden;
  background:#000;
  width: 227px;
  height: 227px; 
  background-color:black;
}
.item:nth-of-type(5n + 1) {
  background-color:red;
  width: 460px;
  height: 460px;
}
.item:nth-of-type(5n - 1){
  margin-left: -230px;
  margin-top: 236px;
}
.item:nth-of-type(5n){
  margin-left: -463px;
  margin-top: 236px;
}

View the live demonstration on jsfiddle

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

The uniform height of flex columns was spoiled by a child element with a display setting of flex

CSS: * { padding: 0; margin: 0; box-sizing: border-box; } body { display: flex; background-color: #F5F5F5; } body > header { display: flex; position: fixed; width: 100%; height: 60px; align-items: center; background-color: #373737 ...

htmlcssflexbox

Managing JWT tokens for secured pages using Sails.js

In an effort to enhance security in my system, I decided to implement JWT token authentication. For the front-end, I opted for statellizer. Once a user logs into the system, a token is generated like this: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJlbWFpbCI ...

angularjsnode.jssails.jsjwtsatellizer

A step-by-step guide on resolving the issue "Error: listen EADDRINUSE: address already in use :::5000" in the event of an error

node:events:495 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE: address already in use :::5000 at Server.setupListenHandle [as _listen2] (node:net:1817:16) at listenInCluster (node:net:1865:12) at Server. ...

javascriptnode.jserror-handlingxamppmern

Sending files using AJAX without FormData in Internet Explorer 9

Unfortunately, IE9 does not support FormData, making file uploads via XMLHttpRequest a more challenging task. Is there a workaround for this issue? I've come across mentions of using iFrames, but the process seems complex and unclear on how to transf ...

javascriptajaxfile-uploadxmlhttprequest

Restarting the timer in JavaScript

How can I reset the countdown timer every time a user types into an input field? I tried using clearTimeout but it doesn't seem to work. Can anyone help me with my existing code instead of providing new code? DEMO: http://jsfiddle.net/qySNq/ Html: ...

javascriptjquery

When attempting to add an item to an array within a sub-document using Mongoose and MongoDB, the error message "Property 'messages' not found" is returned

I am working with four different models: teacher, student, teacherMessageSchema, and studentMessageSchema. The teacherMessageSchema is a subdocument within the 'teacher' model under the messages: [teacherMessageSchema] property, while the student ...

javascriptmongodbexpressmongoosemongoose-schema

How can we stop the navigation submenus (ULs) from appearing as if they are floating?

I've created a navigation bar with an unordered list consisting of smaller unordered lists, each with the class "subnav". When the screen is small, the navigation collapses and the menus stack on top of each other. I want the navigation to maintain i ...

htmlcssnavigationpositionhtml-lists

Encountering Angular Material UI issues following the transition from version 11 to 12

I am currently in the process of updating my Angular application from version 11 to 12, integrating Angular Material, and encountering some error messages: Error No.1 - Error NG8002: Cannot bind to 'ngModel' as it is not a recognized property of ...

javascriptangulartypescriptangular-material

What steps can I take to ensure that my initial Ajax Get request is completed before proceeding with the next one?

Having two methods that return promises is not enough. I am attempting to make the second method execute only after the first one has obtained and manipulated data, but I have struggled to find a solution despite others asking this question before me. Here ...

javascriptjqueryajax

Error: Attempting to access 'map' property of an undefined variable in NEXTJS

I've been struggling to retrieve an image from this API using getStaticProps, but for some reason I can't seem to make it work. In my code snippet, if I add a question mark like this, the console returns 'undefined'. What could be caus ...

javascriptarraysnext.jsfetch-api

Adjust the variable value if the "for" loop encounters an error

In my situation, I have a spreadsheet that contains a script responsible for checking another linked spreadsheet for a customer's name and then returning the associated code. Everything works smoothly when the customer name is found in the "CustomerCo ...

javascriptgoogle-apps-scriptgoogle-sheets

Utilizing the ng-init directive to initialize code based on a JSON object

I am attempting to connect the value of ng-init to an input from a JSON object. However, I am receiving a "Syntax Error: Token" message. Can someone help me identify where I am making a mistake? $scope.obj = { init: 'obj.value = obj.value || 20&apos ...

javascriptangularjs

New Solution for Direct Java Raw Printing in Chrome Browser Post NPAPI Discontinuation

It's common knowledge that NPAPI will soon be eliminated from Chrome. Is there a substitute for the Jzebra/QZ Java plugin that allows for raw printing (sending raw ESC/P commands) to POS printers? Are there any Chrome APIs (based on HTML5 and Javasc ...

javajavascriptgoogle-chromeprinting

Using CSS syntax to target a class within an element distinguished by its unique id

Consider the following code snippet: <div id="dogs" class="content">hello</div> <div id="frogs" class="content">hello</div> <div id="hogs" class="content">hello</div> <div id="logs" class="content">hello</div&g ...

css

What is the best way to fill the MongoDB post schema with every comment for the post?

I have created two schemas, one for posts and another for comments. const PostSchema = new Schema( { title: { type: String, required: true }, text: { type: String, required: true }, author: { type: Schema.Types.ObjectId, ref: 'User' ...

javascriptnode.jsmongodbexpressmongoose-schema

Linking children to their parents in a mat tree structure

I'm looking to create a mat tree based on the provided diagram. So far, I've managed to design the icons and boxes, but I'm struggling with drawing the connecting lines. Can anyone assist me with this part? I'm using a mat nested tree ...

cssangulartreeangular-material

One Background Image Serving Multiple Divs

Can you use one image (PNG or SVG) as the background for multiple divs? Take a look at the images below to see how it could work. And if the screen width gets smaller and the divs stack up vertically, is there a way to change the background accordingly? D ...

javascripthtmlcsssvgpng

Is there a way to restrict access to my website to only be opened in the Chrome browser?

Is there a way to prevent my web application from loading when the link is opened in browsers other than Chrome? Can this be achieved using Javascript or Java? I want to restrict the usage of my web application to only Chrome. Any assistance would be appre ...

javascriptcsshtml

Changing color based on AngularJS condition using CSS

My HTML code looks like this: <div> <i class="glyphicon glyphicon-envelope" style="margin-top: -50px; cursor:pointer; color: #1F45FC" ng-click="createComment(set_id)"> </i> Route <center> ...

javascripthtmlcssangularjs

Mishandling of string interpretation

I'm having trouble converting ANSI color codes from console output into HTML. While I discovered a script that can handle this task, I am struggling to make it parse the strings within node js properly. Even when I attempted to JSON.stringify it to in ...

javascriptnode.js