How To Create Grid Layout in Blogger With Title, Image and Button?

How to create grid layout in Blogger with title, image and button

Create Grid Layout in Blogger With Title, Image and Button:

Because they appear nice on all devices, responsive grid layouts are ideal for displaying a group of photos with links (or CTAs). The Portfolio Grid, Blog Grid, and Gallery Grid are all wonderful built-in modules in the Emexee builder that use grid displays. However, you may wish to create your own bespoke picture grid arrangement with CTAs on occasion. This provides you more control over the style and content displayed for each grid item without the need for a plugin.

Today, we'll teach you how to use Emexee's built-in design tools to create a responsive picture grid layout with CTAs. To do this, we'll use a specialty section to arrange the grid and a Call to Action module to apply overlays to each picture.

Using a twelve column structure, five preset responsive tiers, Sass variables and mixins, and dozens of predefined classes, you can create layouts of all shapes and sizes with our powerful mobile-first flexbox grid.

CSS Grid Layout excels in dividing a page into key areas or defining the connection between pieces of a control constructed from HTML primitives in terms of size, position, and layer.

Grid layout, like tables, allows an author to arrange items into columns and rows. However, CSS grid allows for or makes it easier to create many more layouts than tables did. A grid container's child components, for example, might position themselves so that they overlap and layer, similar to CSS positioned elements.

How To Add Grid Style Layout in Blogger?

Step-1: Go to blogger "Layout" section
Step-2: Add new"HTML, JavaScript" widget
Step-3: Copy code below
Step-4: Paste code & save

<style>
.w {
  margin: 0 auto;
  background-color: gray;
  display: flex;
  width: 900px;
  gap: 10px;
  padding: 10px;
}

.card {
  width: 300px;
  background-color: white;
  border: 1px solid #000;
  box-sizing: border-box;
  padding: 10px;
}

.card img {
  width: 100%;
}

h4 {
  color: lightgray;
}

.card button {
  background-color: blue;
  color: white;
  width: 100%;
  border: none;
  padding:5px;
}
</style>
<div class="w">
  <div class="card">
    <img src="https://via.placeholder.com/300px">
    <h3>Title</h3>
    <h4>Sub title</h4>
    <button class="buy">Buy</button>    
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/300px">
    <h3>Title</h3>
    <h4>Sub title</h4>
    <button class="buy">Buy</button>    
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/300px">
    <h3>Title</h3>
    <h4>Sub title</h4>
    <button class="buy">Buy</button>    
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/300px">
    <h3>Title</h3>
    <h4>Sub title</h4>
    <button class="buy">Buy</button>    
  </div>
  
    
</div>