Recently, I've been tasked with creating a catalogue section for our e-commerce site. My designer came up with this layout which I find really appealing, but I'm having trouble figuring out how to implement it. I attempted using tables, but it didn't give me the desired outcome.
https://i.sstatic.net/wb4hg.png
I am considering utilizing a grid system instead. What are your thoughts on this approach?
To achieve this layout, I have set item3 to be slightly wider than the left and right columns, and item4 to have a bit more height than item6.
I trust this information will be useful for you.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
max-width: 600px;
aspect-ratio: 1 / 1;
border: 1px solid magenta;
margin-inline: auto;
padding: 1em;
/* Grid */
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1em;
}
.item {
border: 1px solid green;
}
#item1 {
grid-row: 1 / 3;
}
#item2 {
grid-column: 2 / 4;
}
#item3 {
width: 115%;
grid-row: 2 / 4;
grid-column-start: 2;
}
#item6 {
order: 5;
}
#item4 {
width: 85%;
height: 80%;
justify-self: end;
}
#item6 {
width: 85%;
height: 120%;
justify-self: end;
align-self: end;
}<div class="container">
<div class="item" id="item1">1</div>
<div class="item" id="item2">2</div>
<div class="item" id="item3">3</div>
<div class="item" id="item4">4</div>
<div class="item" id="item5">5</div>
<div class="item" id="item6">6</div>
</div>Verify my pen and learn how I achieved it, utilizing flex instead of grid.
HTML
<div class="container">
<div class="left">
<div class="long"></div>
<div class="short"></div>
</div>
<div class="right">
<div class="rectangle"></div>
<div class="list">
<div class="long"></div>
<div class="short">
<div></div>
<div></div>
</div>
</div>
</div>
</div>
CSS
.container {
display: flex;
flex-wrap: nowrap;
}
.container .left {
display: flex;
flex-direction: column;
width: calc(40% - 20px);
margin-right: 20px;
}
.container .left div {
background: red;
}
.container .left .long {
flex: 1
}
.container .left .short {
height: 250px;
margin-top: 20px;
}
.container .right {
width: 60%;
display: flex;
flex-direction: column;
}
.container .right .rectangle {
width: 100%;
height: 250px;
background-color: red;
}
.container .right .list {
display: flex;
flex-wrap: nowrap;
flex: 1;
margin-top: 20px;
}
.container .right .long {
width: calc(50% - 20px);
margin-right: 20px;
flex: 1;
background-color: red;
}
div .right .list .short {
width: 50%;
}
div .right .list .short div {
background-color: red;
width: 100%;
height: 200px;
margin-bottom: 20px;
}
div .right .list .short div:last-child {
margin-bottom: 0;
}
A great way to achieve this is by utilizing the grid system, especially when working with Tailwind CSS.
By using classes like grid, grid-cols-n, and grid-rows-n, you can easily define the layout of your grid. Then, utilize col-span-n and row-span-n to expand elements across columns and rows accordingly. Here's an example:
<div class="grid grid-cols-3 grid-rows-3 gap-4 w-8/12 mx-auto mt-16">
<div class="row-span-2 rounded-lg bg-green-400 flex justify-center items-center">block</div>
<div class="col-span-2 rounded-lg bg-green-400 flex justify-center items-center">block</div>
<div class="row-span-2 rounded-lg bg-green-400 flex justify-center items-center">block</div>
<div class="rounded-lg bg-green-400 flex justify-center items-center">block</div>
<div class="rounded-lg bg-green-400 flex justify-center items-center">block</div>
<div class="h-40 rounded-lg bg-green-400 flex justify-center items-center">block</div>
</div>
For a visual demonstration, check out this example on Tailwind Play.
If you notice any discrepancies in height, consider adjusting the grid dimensions and adding specific col-span and row-span values based on your requirements.
Don't forget to view this informative video from Tailwind Labs for more insights.
I hope these suggestions prove helpful!
To achieve a grid layout similar to this, you can utilize the grid classes provided by Tailwind CSS.
<script src="https://cdn.tailwindcss.com"></script>
<div class="mx-auto mt-16 grid w-8/12 grid-cols-3 text-white grid-rows-3 gap-4 bg-slate-200">
<div class="row-span-2 flex items-center justify-center rounded-lg bg-gradient-to-l from-green-400 to-green-900">block1</div>
<div class="col-span-2 flex items-center justify-center rounded-lg bg-gradient-to-l from-green-400 to-green-900">block2</div>
<div class="row-span-2 flex items-center justify-center rounded-lg bg-gradient-to-l from-green-400 to-green-900">block4</div>
<div class="flex items-center justify-center rounded-lg bg-gradient-to-l from-green-400 to-green-900">block5</div>
<div class="flex items-center justify-center rounded-lg bg-gradient-to-l from-green-400 to-green-900">block3</div>
<div class="flex h-40 items-center justify-center rounded-lg bg-gradient-to-l from-green-400 to-green-900">block6</div>
</div><div class="row align-items-center remember"> <input type="checkbox" class="form-control" checked>Remember Me </div> <div class="row align-items-center"> <input type=& ...
I am currently facing an issue with a Bootstrap navbar that includes a dropdown menu for selecting courses. On my desktop, everything works perfectly fine when I click on the courses tab. However, when I try to select a course on mobile, nothing happens. ...
I'm interested in setting up a folder structure like this: assets - scss - folder file.scss anotherfile.scss anotherfile.scss anotherfile.scss - anotherfolder file.scss anotherfile.scss anotherfile.scss ...
As a provider of a service that helps users find the location of pictures, I face a challenge due to the fact that the pictures are stored on another internal site. Some users may not have access to this site as my service offers additional information. Th ...
Whenever I attempt to run this function, I encounter an issue. My goal is to retrieve the latitude and longitude of an address from Google's API. This error message pops up: core.js:15723 ERROR TypeError: Cannot read property 'geometry' of ...
Currently, I am in the process of constructing a layout using a table with nested ng-repeat. <div ng-controller="PresetManageController"> <table> <in-preset ng-repeat="preset in presetManage.presets"></in-preset> </table ...
After downloading a theme, I attempted to edit the background of the "navbar_fixed" in the <header class="main_menu_area navbar_fixed"> .scss code for custom CSS. However, despite my efforts, the changes made in the .scss file do not reflect in the H ...
Below is the code snippet I am working with: app.get("/editar-equipo?:id", (req, res) => { const equipos = obtenerEquipos() let equipoSeleccionado for(let i = 0; i < equipos.length; i++){ if(equipos[i].numeroId === ...
I am having trouble with positioning the footer so that it always stays at the bottom of the page. When there is not enough content on the page, the footer does not reach the bottom as desired. Additionally, the footer does not have a fixed height. Below i ...
Whenever I execute my ajax jquery function, I encounter a 400 error Here is my code. All Postman tests pass successfully, but when the web app runs, it fails. I'm not sure if it's a coding issue or something related to HTML5. Can anyone offer as ...
Something seems off. The sorting doesn't work as expected. Check out the JavaScript code below: function sortDescending(a, b) { var date1 = $(a).data('date'); var date2 = $(b).data('date'); return date1 > date2; } ...
After putting my coding skills to the test, I successfully crafted a stunning pie chart using only HTML and CSS. https://i.sstatic.net/5xCbl.png Here's the code snippet I tinkered with: HTML - <div class="pie-chart"></div> CS ...
I am struggling to create a horizontal form with three fields due to the space issue between the label and input type elements. My goal is to minimize the space between the label and input. Here is the HTML code snippet: <div class="container-flu ...
The white-space property in CSS-3 offers the pre-wrap value, which maintains whitespace and line breaks while wrapping as needed, along with the pre-line value that collapses whitespace but retains line breaks and wraps when necessary. However, there is c ...
My approach to creating a row with 9 columns involved using custom CSS to set each column's width to 11.11%, resulting in equal distribution across the row. I then applied the "custom-column" class to populate the row data: .custom-column { widt ...
Here is the HTML code: <div id="div001"> This is ${Row.1}. <p>${Row.2} explain something else.</p> <p>${Row.3} welcome you. <span>${Hello.World}, this is a new world.</span></p> </div> My objective is ...
I am facing an issue with the script I have: import dash import pandas as pd import numpy as np import database from dash import Dash, dcc, html import dash_bootstrap_components as dbc # create a dash app that is mobile-friendly app = dash.Dash(__name__, ...
I was trying to include a search form inside a div using the code below: printf( '<div class="entry"><p>%s</p>%s</div>', apply_filters( 'genesis_noposts_text', __( 'Try again below.', 'genesis&apo ...
How can I retrieve the value of a span tag based on its css class using jQuery? <span class="page-numbers current">3</span> I attempted to do so with the following code: var pageno = $(".page-numbers current").val(); alert(pageno); Howeve ...
CSS .body { background: linear-gradient(-45deg, rgb(255, 0, 0), rgba(216, 29, 29, 0.856), #fdfdfdd7, #234cd5, #ffffff); background-size: 400% 400%; background-repeat:no-repeat; animation: gradient 35s ease infinite; height: 100vh; } HT ...