thainv-dev: responsive

This commit is contained in:
nguyen van thai
2024-05-30 22:42:55 +07:00
parent b52352660d
commit dd09434deb
4 changed files with 12 additions and 11 deletions
@@ -141,7 +141,7 @@ const CLASS_FOR_SECTION = computed(() => {
</script>
<template>
<div class="section_layout grid gap-x-5 gap-y-2.5" :class="[CLASS_FOR_SECTION.section_layout]">
<div class="section_layout grid sm:gap-x-5 sm:gap-y-2.5 gap-[10px] lg:grid-cols-2" :class="[CLASS_FOR_SECTION.section_layout]">
<div
v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
:key="index"
@@ -159,11 +159,12 @@ const CLASS_FOR_SECTION = computed(() => {
}
&.two_col_layout {
grid-template-columns: repeat(2, minmax(0, 1fr));
@apply md:grid-cols-2 grid-cols-1;
}
&.three_col_layout {
grid-template-columns: repeat(3, minmax(0, 1fr));
@apply lg:grid-cols-3 grid-cols-1;
// grid-template-columns: repeat(3, minmax(0, 1fr));
}
&.four_col_layout {
grid-template-columns: repeat(4, minmax(0, 1fr));