An ample gap exists amongst the playing cards

Hey everyone, I know there will be a question about this but I can't seem to find it. I really need some space between the cards in the grid view. Also, having the "Read more" link towards the bottom right would be great. Thanks for any assistance!

<mat-grid-list cols="2" rowHeight="2:1">
    <mat-grid-tile >
      <div fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="20px">
        <div class="card mat-elevation-z3" >
        <h4 class="blogTitle">Understanding Test Anxiety and Its Symptoms</h4>
        <p>
          Whether you are a student at any level of education or a professional pursuing continuous learning, feeling nervous or anxious is common when facing exams or new challenges.
        </p>
        <a href="" style="color:blue">Read More</a>
        </div>
      </div>
    </mat-grid-tile>
    <mat-grid-tile >
      <div fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="20px">
        <div class="card mat-elevation-z3" >
          <h4 class="blogTitle">Understanding Test Anxiety and Its Symptoms</h4>
          <p>
            Whether you are a student at any level of education or a professional pursuing continuous learning, feeling nervous or anxious is common when facing exams or new challenges.
          </p>
          <a href="" style="color:blue">Read More</a>
        </div>
      </div>
    </mat-grid-tile>
</mat-grid-list>

See the result of the code above

Answer №1

Adding Spacing between Items in a mat-grid-list

<mat-grid-list cols="2" rowHeight="2:1" gutterSize="8">
...
</mat-grid-list>

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

Sending a file along with other form data simultaneously

Currently utilizing ajax file upload to submit a file along with other form fields, but encountering issues with functionality. $.ajaxFileUpload({ url: './uploadtest.php', secureuri: false, fileElementId: 'userfile', d ...

When utilizing the built-in filter in Angular 2 ag-grid, the Clear Filter button efficiently removes any text from the filter box without needing to refresh the

When using ag-Grid's default filter feature, I noticed that the clear filter button only clears the text box and does not automatically refresh the column, even when the 'clearButton' and 'applyButton' parameters are set to true. T ...

Activate the CSS on a click event using the onClick method

I am trying to implement a transition that triggers when clicking on a specific div element. Currently, the transition only occurs with the active css class. How can I achieve this effect by simply clicking on the div itself? I am using reactjs and believe ...

The application of border-radius causes the div to extend beyond its intended height

Is there a way to achieve a smooth shadow effect on pictures without it touching the corners? I attempted to do this by adding a border-radius and box-shadow to the parent div of the images, but now the parent div is taller than the picture itself. Any sug ...

Resolving the Persistence Problem of Navigation Bar Fading In and Out

I've been struggling for hours trying different methods to achieve the desired outcome, but unfortunately, none of them have worked as expected. My goal is simple: I want the fixedbar to fade in when the scroll position exceeds the position of the ph ...

Expand the functionality of XHTML by incorporating namespaces

I remember coming across this concept somewhere, but I can't recall the exact source. I am interested in expanding HTML tags to include my own attributes on the HTML elements. I remember seeing an example where a developer added a new xmlns to the pa ...

Is Jquery Mobile's Table lacking responsiveness?

I have implemented a basic table from the jQuery Mobile website on my page. Take a look at the HTML code below: <div data-role="page" id="mainPage"> <div data-role="content> <table data-role="table" id="my-table" da ...

Customizing the appearance of the 'Submit' button compared to the <a href=""></a> button using CSS

I am experiencing some issues. Even though the CSS code for these two buttons is exactly the same, their appearance is different. I am unable to make the :hover or :active effects work either. My goal is to have the left 'input type="submit' but ...

Setting the second tab as the primary active tab

I am currently working on a script that is well-known, and everything is functioning perfectly. However, I want to change it so that when the page is first opened, it displays the second tab instead of the first one (the first tab being a mail compose tab ...

Divs are not being organized into rows correctly due to issues with Bootstrap styling

I have implemented Bootstrap in my Angular application. The stylesheet link is included in my Index.html file as follows: <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"> In addition to that, I have listed Bootstrap a ...

Animating the appearance and behavior of radio buttons using CSS transitions and JavaScript

My jQuery code allows me to fetch attributes from the .item element, but I'm having trouble with my CSS transitions not working as intended. To see the desired transition effect, try replacing .item with .item-tile. How can I make my CSS transitions ...

Uncheck all boxes except for the required or disabled boxes in Angular

HTML: <mat-selection-list #selectedColumns [(ngModel)] ="selectedOptions"> <div class= "content-section"> <mat-expansion-panel> <mat-expansion-panel-header> ...

What is the best way to right-align a label in a vertical MUI Slider in ReactJS?

I am currently working with ReactJS/TS and MUI (Material-UI) to develop a vertical slider that requires the label to be positioned on the right side. By default, MUI places the label on the left for vertical sliders. I have reviewed the API documentation e ...

Working with bulk operations on a RESTful API using Angular

When attempting bulk operations on JSON data from Angular using HttpClient, I encountered an issue where it only updates the last checked record instead of updating the entire JSON. Seeking assistance to rectify this problem. I believe a bulk operation ne ...

The existing object contains a value, however, attempting to access its property results in an undefined value being

I have discovered some unusual occurrences in my coding. Specifically, I have an AuthService that handles authentication requirements for my applications, including the authentication token. @IonicPage() @Component({ selector: 'page-login', ...

Error: Angular7 Unable to locate namespace 'google'

I am currently utilizing the import { MapsAPILoader } from '@agm/core'; package to enable auto-complete address search functionality. However, I have encountered an error message stating cannot find namespace 'google'. The error occu ...

I'm not entirely sure how JQuery processes the .each() function and the (this) keyword

I'm still learning JQuery and trying to figure it out. Can you help me understand what's going wrong with my code below? I have multiple content blocks with classes .acc-0, acc-1, and so on. I want to show and hide the .plans-breakdown when the ...

What is the best way to use Google Material-Design-Icons in my project once I have installed it

Once I've installed the material-design-icons package using npm, how can I incorporate them into my React application? The instructions provided here do not mention the npm method. ...

Creating a visually appealing chart similar to Excel can be achieved using JavaScript with a whopping 64382 lines of JSON data. No need for Chart.js or any additional tools - simply rely on JavaScript, HTML, and CSS to

I have a project that is due in just a few hours and I need to create a detailed chart using a large set of 64382 lines of JSON data. My knowledge of javascript is limited, so I am struggling to come up with ideas on how to approach this task. While I have ...

I'm looking for tips on how to create a responsive wrapper class within a jumbotron. My experience with this is

I am struggling to make the wrapper class responsive. I have searched everywhere for answers but haven't found a solution yet. Hopefully, I can find some help here: .jumbotron { overflow: hidden; background-color:whitesmoke; opacity:1.0; ...