In this blog, I have to explain how to create a card layout using the grid.

What is Grid Layout?

The Grid layout is most effective layout in CSS. Grid Layout is optimized for two-dimensional layouts: those in which alignment of content is desired in both dimensions. It can handle both columns and rows. Grid layout use in forms, image galleries, website layout, and anything that requires exact and responsive positioning.

Step 1: Create a card component

For a card layout first, you need to design the card. In below the example, I have created a simple card with image, title, content, and button. you can use the below HTML and CSS code for making a simple card layout.

HTML:

<div class="card">
  <div class="bg-img"></div>
  <div class="content">
    <h4>Card title</h4>
    <p>Content....</p> <button>Readmore</button> </div>
</div>

CSS:

.card {
  border: 1px solid #d3d3d3;
  border-radius: .25rem;
}

.bg-img {
  background-size: cover;
  min-height: 180px;
  background-position: center;
  background-color: #ccc;
}

.content {
  padding: 15px;
}

button {
  background-color: transparent;
  border: 1px solid #2196F3;
  padding: .5rem 1rem;
  cursor: pointer;
  border-radius: .25rem;
}

RESULT:

Card-layout

Step 2: Basic of Grid layout

A grid is an intersecting set of horizontal and vertical lines – one set describes columns and the other rows.

Grid Layout gives us a method for creating grid structures that are described in CSS and not in HTML.

CSS grid layout has the following features:

  • Fixed and flexible track sizes
  • Item placement
  • Creation of additional tracks to hold content
  • Alignment control
  • Control of overlapping content

Before starting the card layout you also know about the basic concept of the grid layout

A grid layout consists of a parent element, with one or more child elements.

<div class="grid-container">
  <div class="card"> ... </div>
</div>
.grid-container {
  display: grid;
}

In above example, I have to give display: grid in parent div .grid-container.

Step 3: Card layout using grid

Now, I will explain to you how to create a card layout using a grid. The following properties are used in the card layout.

 grid-gap:  grid-gap is a gutter between rows and columns in grid-layout, and it is also shorthand property for the following properties:

Grid-gap

In above image in grid-column-gap is 10px and grid-row-gap is 15px.

grid-template-columns:  The grid-template-columns property describes the line names and track sizing function of a grid’s columns. You should note that the grid-template-column is one of the most important properties in the grid.

CSS syntax:

grid-template-columns: 30vw 1fr 15vw;
grid-template-columns: [col1-start] 30vw [col2-start] 1fr [col3-start] 15vw;

grid-template-rows:  The grid-template-rows property describes the line names and track sizing function of a grid’s rows. You should note that the grid-template-rows are one of the most important properties in the grid.

CSS syntax:

grid-template-rows: 10vh 1fr 10vh;
grid-template-rows: [row1-start] 10vh [row2-start] 1fr [row3-start] 10vh;
fr units:

It stands for “fraction of available space”. The fr unit can be used for grid-rows and grid-columns values.

repeat():

The repeat () CSS function represents a repeated fragment of the tracklist, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.

This function used in the CSS Grid properties grid-template-columns and grid-template-rows.

CSS syntax:

grid-template-columns: repeat(3,1fr) or  grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr 2fr) or grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;

Example:

In below example, I have to design 3 columns layout. Suppose you want to 4 columns layout you can change the grid-template-columns: repeat(4,1fr) and you can also change the card’s width in px instead of fr.                           e.g:       

 grid-template-columns: repeat(2, 100px 200px); or
 grid-template-columns: 100px 200px 100px 200px;

HTML:

<div class="grid-container">
  <div class="card">
    <div class="bg-img"></div>
    <div class="content">
      <h4>Card title</h4>
      <p> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <button>Readmore</button> </div>
  </div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}
 
RESULT:
Grid-layout

Now, I have to explain the other function of the grid layout which is used in the card layout.

minmax():

minmax(smallest size, largest size) is replacing the size value in our repeat() function will be minmax() function.

minmax() allows you to specify the smallest and largest size.
 
CSS syntax:
 
grid-template-columns: minmax(200px,1fr);

auto-fill and auto-fit:

auto-fill: fill the space with tracks.

.grid-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   grid-gap: 20px;
}

In above example, we use the auto-fill property in repeat function.  We get as many tracks with a minimum of 300 pixels and maximum of 1fr as will fit in the container.

RESULT:
auto-fill

auto-fit: fit the items into space

.grid-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   grid-gap: 20px;

}

In above example, we use the auto-fit property in repeat function. We get as many tracks with a minimum of 300 pixels and maximum of 1fr as will fit in the container.So our items can expand to take up the remaining space in auto-fit.

RESULT:
auto-fit

Using the auto fill or auto-fit cards you need to size down to fit in a mobile device and size up to be a fraction of the space available, because they appear full-width on a smaller device, so no separate media query needed.

 

1.without using auto-fill or auto-fit demo
Basic-Grid-layout

2. with using auto-fill or auto-fit:
Grid-layout

In the first example, I have not use auto-fill or and auto-fit and resize the screen(mobile device), you can see that card width is reduced and not auto-adjusts in a mobile device.

In the second example, I have to use auto-fill or and auto-fit and resize the screen(mobile device), you can see that card width is fixed and auto-adjust on the mobile device.

Step 4: DIFFERENT types of card layout

Here I explain the different types of grid card layout using grid-columns and grid-rows properties.

For the more about grid card layout examples, you can  refer this link GRID CARD LAYOUT

1. span2 columns
HTML:
<div class="grid-container">
  <div class="card">
    ...
  </div>
  <div class="card">
    ...
  </div>
  <div class="card">
    ...
  </div>
</div>
CSS:
.grid-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   grid-gap: 20px;

}
.grid-container .card:first-child {
   grid-column: span 2;

}
RESULT:

You can see that in the below image how to merging two column with using grid-column: span 2;

Colspan

In above example we are using grid-column: span 2, you can also apply grid-column: span 3, you can see the below image:-

grid

2. span2 rows
HTML:
<div class="grid-container">
  <div class="card">
    ...
  </div>
  <div class="card">
    ...
  </div>
  <div class="card">
    ...
  </div>
  <div class="card">
    ...
  </div>
  <div class="card">
    ...
  </div>
</div>
CSS:
.grid-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   grid-gap: 20px;
}
.grid-container .card:first-child {
   grid-row: span 2;
}
RESULT:

You can see that in the below image how to merging two row with using grid-row: span 2;

Rowspan