Custom CSS grid layout is not showing as needed

[MuneebJoiya]

I want to make the CSS grid layout as like the client WordPress website. But mine is not looking like the exact. It needs to be adjusted. Mine images are not aligning as I have also put code. Secondly the third column rows are not getting gap. The code is:

{% schema %}
{
“name”: “Grid Section”,
“settings”: [
{
“type”: “image_picker”,
“id”: “first_column_image”,
“label”: “First Column Image”
},
{
“type”: “select”,
“id”: “first_column_alignment”,
“label”: “First Column Image Alignment”,
“default”: “center-center”,
“options”: [
{“value”: “center-center”, “label”: “Center”},
{“value”: “center-top”, “label”: “Center Top”},
{“value”: “center-bottom”, “label”: “Center Bottom”},
{“value”: “left-top”, “label”: “Left Top”},
{“value”: “left-center”, “label”: “Left Center”},
{“value”: “left-bottom”, “label”: “Left Bottom”},
{“value”: “right-top”, “label”: “Right Top”},
{“value”: “right-center”, “label”: “Right Center”},
{“value”: “right-bottom”, “label”: “Right Bottom”}
]
},
{
“type”: “checkbox”,
“id”: “first_column_zoom”,
“label”: “Enable zoom effect on hover (First Column Image)”
},
{
“type”: “image_picker”,
“id”: “second_column_image”,
“label”: “Second Column Image”
},
{
“type”: “select”,
“id”: “second_column_alignment”,
“label”: “Second Column Image Alignment”,
“default”: “center-center”,
“options”: [
{“value”: “center-center”, “label”: “Center”},
{“value”: “center-top”, “label”: “Center Top”},
{“value”: “center-bottom”, “label”: “Center Bottom”},
{“value”: “left-top”, “label”: “Left Top”},
{“value”: “left-center”, “label”: “Left Center”},
{“value”: “left-bottom”, “label”: “Left Bottom”},
{“value”: “right-top”, “label”: “Right Top”},
{“value”: “right-center”, “label”: “Right Center”},
{“value”: “right-bottom”, “label”: “Right Bottom”}
]
},
{
“type”: “checkbox”,
“id”: “second_column_zoom”,
“label”: “Enable zoom effect on hover (Second Column Image)”
},
{
“type”: “image_picker”,
“id”: “third_column_first_image”,
“label”: “Third Column - First Image”
},
{
“type”: “select”,
“id”: “third_column_first_alignment”,
“label”: “Third Column - First Image Alignment”,
“default”: “center-center”,
“options”: [
{“value”: “center-center”, “label”: “Center”},
{“value”: “center-top”, “label”: “Center Top”},
{“value”: “center-bottom”, “label”: “Center Bottom”},
{“value”: “left-top”, “label”: “Left Top”},
{“value”: “left-center”, “label”: “Left Center”},
{“value”: “left-bottom”, “label”: “Left Bottom”},
{“value”: “right-top”, “label”: “Right Top”},
{“value”: “right-center”, “label”: “Right Center”},
{“value”: “right-bottom”, “label”: “Right Bottom”}
]
},
{
“type”: “checkbox”,
“id”: “third_column_first_zoom”,
“label”: “Enable zoom effect on hover (Third Column - First Image)”
},
{
“type”: “image_picker”,
“id”: “third_column_second_image”,
“label”: “Third Column - Second Image”
},
{
“type”: “select”,
“id”: “third_column_second_alignment”,
“label”: “Third Column - Second Image Alignment”,
“default”: “center-center”,
“options”: [
{“value”: “center-center”, “label”: “Center”},
{“value”: “center-top”, “label”: “Center Top”},
{“value”: “center-bottom”, “label”: “Center Bottom”},
{“value”: “left-top”, “label”: “Left Top”},
{“value”: “left-center”, “label”: “Left Center”},
{“value”: “left-bottom”, “label”: “Left Bottom”},
{“value”: “right-top”, “label”: “Right Top”},
{“value”: “right-center”, “label”: “Right Center”},
{“value”: “right-bottom”, “label”: “Right Bottom”}
]
},
{
“type”: “checkbox”,
“id”: “third_column_second_zoom”,
“label”: “Enable zoom effect on hover (Third Column - Second Image)”
}
],
“presets”: [
{
“name”: “Custom Grid Section”
}
]
}
{% endschema %}

/* Adjust the grid layout */ .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); /* Adjust the number of columns */ grid-gap: 10px; } /* Adjust the grid item layout */ .grid-item { position: relative; width: 100%; height: 617px; /* Adjust the height of the columns */ overflow: hidden; } /* Adjust the styling for the images */ .grid-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-in-out; } /* Add zoom effect on hover */ .grid-item:hover img { transform: scale(1.1); } /* Adjust the grid layout for the third column */ .grid-item-third { display: grid; grid-template-rows: calc(20% - 2px) calc(80% - 8px); /* Divide the third column into two parts */ grid-gap: 10px; height: 100%; /* Make the third column occupy the full height of the parent */ } /* Adjust the grid layout for the fourth column */ .grid-item-fourth { display: grid; grid-template-rows: 1fr; /* Occupy the full height of the parent */ grid-gap: 10px; height: 100%; /* Make the fourth column occupy the full height of the parent */ } /* Adjust image alignment */ .grid-item img { object-position: {% case section.settings.first_column_alignment %} {% when 'center-center' %} center center; {% when 'center-top' %} center top; {% when 'center-bottom' %} center bottom; {% when 'left-top' %} left top; {% when 'left-center' %} left center; {% when 'left-bottom' %} left bottom; {% when 'right-top' %} right top; {% when 'right-center' %} right center; {% when 'right-bottom' %} right bottom; {% else %} center center; {% endcase %}; } .grid-item-second { object-position: {% case section.settings.first_column_alignment %} {% when 'center-center' %} center center; {% when 'center-top' %} center top; {% when 'center-bottom' %} center bottom; {% when 'left-top' %} left top; {% when 'left-center' %} left center; {% when 'left-bottom' %} left bottom; {% when 'right-top' %} right top; {% when 'right-center' %} right center; {% when 'right-bottom' %} right bottom; {% else %} center center; {% endcase %}; } /* Adjust third column image alignment */ .grid-item-third .grid-item img { object-position: {% case section.settings.third_column_first_alignment %} {% when 'center-center' %} center center; {% when 'center-top' %} center top; {% when 'center-bottom' %} center bottom; {% when 'left-top' %} left top; {% when 'left-center' %} left center; {% when 'left-bottom' %} left bottom; {% when 'right-top' %} right top; {% when 'right-center' %} right center; {% when 'right-bottom' %} right bottom; {% else %} center center; {% endcase %}; }