var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),m=(n,e)=>{for(var t in e)a(n,t,{get:e[t],enumerable:!0})},i=(n,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of y(e))!u.call(n,s)&&s!==t&&a(n,s,{get:()=>e[s],enumerable:!(r=B(e,s))||r.enumerable});return n};var A=(n,e,t)=>(t=n!=null?p(g(n)):{},i(e||!n||!n.__esModule?a(t,"default",{value:n,enumerable:!0}):t,n)),v=n=>i(a({},"__esModule",{value:!0}),n);var c=w((x,o)=>{o.exports=_jsx_runtime});var f={};m(f,{default:()=>h,frontmatter:()=>F});var l=A(c()),F={title:"Tailwindcss: How to make a Gird with card of the same height",description:"How to make a grid with cards of the same height using Tailwindcss. In this post, we will explore how to create a responsive grid layout with cards that have the same height using Tailwindcss.",published:"2024-09-25",featured:!1,tags:"tailwindcss, css"};function d(n){let e={a:"a",code:"code",figure:"figure",h2:"h2",p:"p",path:"path",pre:"pre",span:"span",svg:"svg",...n.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(e.p,{children:"When building a grid layout with cards, you may want the cards to have the same height to create a consistent and visually appealing design. In this post, we will explore how to create a responsive grid layout with cards that have the same height using Tailwindcss."}),` `,(0,l.jsxs)(e.h2,{id:"creating-a-grid-layout-with-cards",className:"flex items-center relative group",children:[(0,l.jsx)(e.a,{className:"absolute -left-6 top-0 bottom-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-200",href:"#creating-a-grid-layout-with-cards",children:(0,l.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor",className:"w-4 h-4",children:(0,l.jsx)(e.path,{fillRule:"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"})})}),"Creating a grid layout with cards"]}),` `,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282c34",color:"#abb2bf"},tabIndex:"0","data-language":"html","data-theme":"one-dark-pro",children:(0,l.jsxs)(e.code,{"data-language":"html","data-theme":"one-dark-pro",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#E06C75"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#D19A66"},children:" class"}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#98C379"},children:'"grid auto-rows-fr grid-cols-3 gap-2"'}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#E06C75"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#D19A66"},children:" class"}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#98C379"},children:'"rounded bg-slate-100 p-3"'}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:">This has some content."})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#E06C75"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#D19A66"},children:" class"}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#98C379"},children:'"rounded bg-slate-100 p-3"'}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:" This has more content so that its significantly larger than the other"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:" items. Yet all items, even the one in the new line will grow to the"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:" size of the highest container."})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#E06C75"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#D19A66"},children:" class"}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#98C379"},children:'"rounded bg-slate-100 p-3"'}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:">More content."})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#E06C75"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#D19A66"},children:" class"}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#98C379"},children:'"rounded bg-slate-100 p-3"'}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:">First item in new line."})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:""})]})]})})}),` `,(0,l.jsxs)(e.p,{children:["The important part here is ",(0,l.jsx)(e.code,{children:"auto-rows-fr"})," which will make sure that all the items in the grid will have the same height."]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(d,{...n})}):d(n)}return v(f);})(); ;return Component;