Angular's responsiveness is enhanced by CSS Grid technology

I am attempting to integrate a CSS grid template that should function in the following manner:

  1. Columns with equal width

  2. 1st and 3rd rows - 2 columns

    2nd row - 3 columns

https://i.sstatic.net/aQyNR.png

Order = [{      
    details:[
      {
        key: '1',
        label: 'Name',
        checked: true
      },
      {
        key: '2',
        label: 'Age',
        checked: false
      },
      {
        key: '3',
        label: 'Valid From'
      },
      {
        key: '4',
        label: 'Valid To'
      },
      {
        key: '5',
        label: 'Product'
      },
      {
        key: '6',
        label: 'State'
      },
      {
        key: '7',
        label: 'Country'
      }}]

Using the above JSON, I have created the CSS grid

    <div class="order-container">
    <div class="grid-item">
        <div class="grid-header vds-type-copy-strong"   *ngFor="let col of salesOrder1[0].details">
                <div>{{col.label}}</div>
        </div>
    </div>
</div>

CSS

   .order-container {
    .grid-item {
        padding: 5px;
        max-height: 402px;
        overflow-y: auto;
        display: grid;
        grid-gap: 4px;
        grid-template-columns: 1fr 1fr 1fr;
        .grid-header {
            text-align: center;
            div{
                padding: 8px 8px;
                margin-bottom: 4px;
                min-height: 37px;
            }
        }
    }
}

How can I split the content after Age and then again after Product?

Answer №1

Here's an interesting concept to consider. I'm not entirely sure how you could implement this in Angular, but just as a suggestion, maybe you could try creating a blank box to see if it helps. Let me know what you think!

.wrapper {
  background-color: gray; 
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-evenly;
  grid-gap: 10px;
  padding: 10px;}

.box {
  width: 200px; 
  height: 80px; 
  border: 1px solid black;
  background-color: white;
  }

.hiddenbox {
  background-color: transparent;
  border:0px solid transparent;
  }
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="hiddenbox box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

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

What is the best way to style an image with CSS when it is not contained within a disabled parent element?

Struggling to find a way to add a hover effect to an image that is not inside a disabled element? Although it seems like the css selector below should do the trick, it doesn't quite work as expected. In this scenario, I only want the hover effect on e ...

Stop users from navigating back to specific routes by implementing route guards in Angular

I'm pondering whether it's possible to restrict users from revisiting certain routes Here's my dilemma: after a user logs in and follows the login/callback route for authentication, they can get stuck if they navigate back to that same rout ...

Ways to prevent an array from being reset

My issue involves the clothes and orders tables, along with an array based on Clothes and Orders models. Whenever I add a clothes element into the Orders array and specifically update the amount and price of the selected item, it also updates the Clothes a ...

What is the best way to center my items vertically in a material-UI Grid row?

Struggling to vertically align three items in a row using Material UI's Grid component. Despite setting "justifyContent: 'center'," it only horizontally centers the items. Here are my styles: const styles = (theme) => ({ root: { te ...

Encase the entire section following cloning with JQuery

Make sure to check out the jsfiddle demo linked below before proceeding: JSFIDDLE I need to transform the original structure as shown below: <div class="out"> <a>im here</a> <a>to save</a> <a>our</a> ...

What impact does including a parent View Tag have on the styling in React Native?

Why does adding a View parent break my styles? Could React Native's View tag have default styles that I'm not aware of? Displayed below is the Button component along with screenshots demonstrating the difference when using and not using the View ...

Angular4 - Div with ngIf doesn't respond to click event

I'm attempting to add a click event to a specific div. Within this div, there is another div that is dynamically generated based on a Boolean condition that I receive as input. Unfortunately, in this case, the click event is only functioning when clic ...

Update the text on the Bootstrap modal label before it is clicked

I am currently working on implementing a Bootstrap modal with a label control. The modal is triggered by clicking a button, and I am facing an issue where I need to change the text of the label before the modal launches. However, the text that is supposed ...

What is the process for using JQuery to switch the class of an element to 'nested-class'?

Styling with CSS: #logo-container { position: fixed; right:5px; .home-page { /* homepage styling */ } .content-page { /* Modify the $element's class to this class */ margin-top: 78px; } } Using JQuery to change the class of #lo ...

Learn how to display data from the console onto an HTML page using Angular 2

I am working on a page with 2 tabs. One tab is for displaying active messages and the other one is for closed messages. If the data active value is true, the active messages section in HTML should be populated accordingly. If the data active is false, th ...

My customized mat-error seems to be malfunctioning. Does anyone have any insight as to why?

Encountering an issue where the mat-error is not functioning as intended. A custom component was created to manage errors, but it is not behaving correctly upon rendering. Here is the relevant page code: <mat-form-field appearance="outline"> < ...

How can the color of the <md-toolbar> be customized?

Here is a glimpse of how my code appears on CodePen: I am aiming to have the background color of "Sidenav Left" match that of "Menu Items", which is designated by the class .nav-theme { background-color: #34495E } I attempted to override it like this ...

Showing information from the data text option

I'm having trouble displaying text below the cube. The code works fine in a standalone fiddle, but it doesn't work when I incorporate it into my project. Can someone help me figure out how to show the value of data-text="Cube1"? Code t ...

Trouble with CSS transitions not functioning while altering React state

Each time a user clicks on an accordion, the content should smoothly show or hide with a transition effect. However, the transition only seems to work when opening a closed accordion, not when closing an already open one! To get a clearer idea of this iss ...

Angular and ASP.NET: Successful Http Get Web Api request, but Angular fails to display any retrieved values

I've recently created a basic WebApi using asp.net core, here's a snippet of the code: [HttpGet("GetHomePageData")] public IActionResult GetHomePageData() { HomePageData HomePageData = new HomePageData() { ...

Utilizing the moment function within an Angular application

I've successfully added the library moment.js by running: npm i moment I've included it in scripts and attempted to import it in module.ts. However, when I try to use moment in component.ts, I'm getting an error that says: 'canno ...

What is the best way to include Google Calendar in a div container while ensuring it is responsive?

I'm currently working on the layout of a website that features a slideshow of images at the top, followed by an embedded Google Calendar. I've encountered an issue with the responsiveness of the Google Calendar within its designated div container ...

Enhance your JQuery skills by implementing variables within the .css() function

Attempting to randomly assign values to an image's left and right properties using JQuery. Here is the code snippet: var sides = ["left", "right"] var currentSide = sides[Math.floor(Math.random() * sides.length)]; $("#"+currentImage).css({currentSide ...

Angular 2 - AOT Compilation Issue: Running Out of JavaScript Heap Memory

I've been working on an angular2 project and when I try to build the AOT package using the command below, I encounter errors: ng build --aot --prod The errors returned are related to memory allocation failures and out of memory issues in the JavaS ...

Implement feature to toggle function upon clicking radio buttons using bootstrap and angular 5

Currently, I am utilizing Angular 6 and Bootstrap 4. Within my project, there exists a Bootstrap button group: <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary"> <input type="radio" ...