Sorry for the weird title, but I am not aware of a name or simple way to put what I am trying to achieve.
I want to make something like this, but I want it to be responsive so that if some words are longer, the other words get bigger, and the aspect ratio (and shape) of the div remains the same.
I made the example image in Adobe XD, but I would like to recreate it in css.
CSS Grid is probably best for this. How responsive it will be will depend on how well you write your media queries.
* {
font-family: sans-serif;
font-size: 1em;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
grid-template-rows: 1fr 1fr 1fr;
grid-row-gap: 0;
grid-column-gap: 0;
width: 160px;
height: 69px;
padding: 5px;
background-color: #3D3D3D;
justify-items: center;
align-items: start;
box-sizing: border-box;
}
.one {
color: #40C894;
font-weight: 600;
}
.two {
grid-row: 2;
grid-column: 1;
color: #fff;
font-weight: 600;
}
.three {
grid-row: 3;
color: #8A8A8A;
font-weight: 600;
}
.four {
grid-row: 3;
grid-column: 2;
color: #8A8A8A;
font-weight: 600;
}
.five {
grid-row: 3;
grid-column: 3;
color: #fff;
font-weight: 600;
}
.six {
grid-row: 1 / 3;
grid-column: 2 / 4;
color: #8A8A8A;
font-weight: 600;
font-size: 2.4em;
align-self: end;
}
<div class="grid-container">
<div class="one">38 K</div>
<div class="two">19 D</div>
<div class="three">6037</div>
<div class="four">DMG</div>
<div class="five">6 MVPs</div>
<div class="six">2K/D</div>
</div>
Related
In a grid container with 1 column and 1 row, If I have an implicit column on the 1st row, how do I get an element in the second row (the green column in the example) to span both the explicit and implicit columns? Thanks in advance
*{
margin: 0;
padding: 0;
color: white;
padding: 0.6em
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr;
grid-auto-columns: auto;
}
button {
background-color: red;
grid-row-start: 1;
grid-column-start: 2;
grid-column-end: 3;
}
header {
background-color: blue;
grid-row-start: 1;
}
p {
background-color: green;
grid-column-start: 1;
grid-column-end: -1;
width: 100%;
}
<div class="grid">
<header>title</header>
<button>button</button>
<p>paragraph</p>
</div>
*{
margin: 0;
padding: 0;
color: white;
padding: 0.6em
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr;
grid-auto-columns: auto;
}
button {
background-color: red;
grid-row-start: 1;
grid-column-start: 2;
grid-column-end: 3;
}
header {
background-color: blue;
grid-row-start: 1;
}
p {
background-color: green;
grid-column-start: 1;
grid-column-end: 3; /*This is what changed*/
}
<div class="grid">
<header>title</header>
<button>button</button>
<p>paragraph</p>
</div>
Since the implicit column is an auto one, you can make explicit and simplify your code like below
* {
padding: 0.6em
}
.grid {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: 2fr;
color: white;
}
button {
background-color: red;
}
header {
background-color: blue;
}
p {
background-color: green;
grid-column: 1/-1;
}
<div class="grid">
<header>title</header>
<button>button</button>
<p>paragraph</p>
</div>
<div class="grid">
<header>title</header>
<p>paragraph</p>
</div>
With a screen size > 576px and without changing the HTML, how can I collapse the divs so that the divs in the right-hand column appear below each other with only a 10px grid-row-gap.
The description, features and tick-features divs all have dynamic content.
.container {
display: grid;
grid-row-gap: 10px;
background: lightgray;
font-family: sans-serif;
padding: 0;
}
.container h1, .container div {
color: white;
padding: 10px;
margin: 0;
}
.container h1 {
background: blue;
}
.container .description {
background: darkslategray;
}
.container .features {
background: green;
}
.container .tick-features {
background: purple;
}
.container .static-map {
background: maroon;
}
.container .full-width {
background: darkolivegreen;
}
#media screen and (min-width: 576px) {
.container {
grid-template-columns: 50% 1fr;
grid-template-rows: auto;
grid-column-gap: 10px;
max-width: 700px;
}
.container h1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.container .description {
grid-column: 1/2;
grid-row: 2/5;
height: 500px;
}
.container .features {
grid-column: 2 /3;
grid-row: 2 / 3;
height: 100px;
}
.container .tick-features {
grid-column: 2 /3;
grid-row: 3 / 4;
height: 100px;
}
.container .static-map {
grid-column: 2 /3;
grid-row: 4 / 5;
}
.container .full-width {
grid-column: 1 / 3;
grid-row: 5 / 6;
}
}
<div class="container">
<h1>HEADER</h1>
<div class="features">Features</div>
<div class="description">Description</div>
<div class="tick-features">Tick features</div>
<div class="static-map">Static Map</div>
<div class="full-width">Full width div</div>
</div>
Adding images to show what I'm trying to achieve.
+++
The Problem
It's important to note that the cells in the right-hand column are already next to each other, separated only by the 10px row gap.
As you can see with the dashed outlines, there is no wide vertical gap between the cells on the right. The are right next to each other.
The problem is that each item within the cell has a lower height than the row it's in.
.container .features {
grid-column: 2 /3;
grid-row: 2 / 3;
height: 100px;
}
.container .tick-features {
grid-column: 2 /3;
grid-row: 3 / 4;
height: 100px;
}
With each item set to height: 100px, it doesn't cover the full height of the cell, leaving a lot of empty space.
Solutions
Depending on what exactly you need, you can approach the problem in various ways. Here are two:
1. Use min-height instead of height
Replace height: 100px with min-height: 100px, allowing the items to consume all free space. (Consider a similar switch for the .description item.)
.container {
display: grid;
grid-row-gap: 10px;
background: lightgray;
font-family: sans-serif;
padding: 0;
}
.container h1,
.container div {
color: white;
padding: 10px;
margin: 0;
}
.container h1 {
background: blue;
}
.container .description {
background: darkslategray;
}
.container .features {
background: green;
}
.container .tick-features {
background: purple;
}
.container .static-map {
background: maroon;
}
.container .full-width {
background: darkolivegreen;
}
#media screen and (min-width: 576px) {
.container {
grid-template-columns: 50% 1fr;
grid-template-rows: auto;
grid-column-gap: 10px;
max-width: 700px;
}
.container h1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.container .description {
grid-column: 1/2;
grid-row: 2/5;
/* height: 500px; */
min-height: 500px; /* new */
}
.container .features {
grid-column: 2 /3;
grid-row: 2 / 3;
/* height: 100px; */
min-height: 100px; /* new */
}
.container .tick-features {
grid-column: 2 /3;
grid-row: 3 / 4;
/* height: 100px; */
min-height: 100px; /* new */
}
.container .static-map {
grid-column: 2 /3;
grid-row: 4 / 5;
}
.container .full-width {
grid-column: 1 / 3;
grid-row: 5 / 6;
}
}
<div class="container">
<h1>HEADER</h1>
<div class="features">Features</div>
<div class="description">Description</div>
<div class="tick-features">Tick features</div>
<div class="static-map">Static Map</div>
<div class="full-width">Full width div</div>
</div>
2. Use grid-template-rows
You may also be able to handle the problem at the container level, using grid-template-rows.
.container {
display: grid;
grid-row-gap: 10px;
background: lightgray;
font-family: sans-serif;
padding: 0;
}
.container h1,
.container div {
color: white;
padding: 10px;
margin: 0;
}
.container h1 {
background: blue;
}
.container .description {
background: darkslategray;
}
.container .features {
background: green;
}
.container .tick-features {
background: purple;
}
.container .static-map {
background: maroon;
}
.container .full-width {
background: darkolivegreen;
}
#media screen and (min-width: 576px) {
.container {
grid-template-columns: 50% 1fr;
grid-template-rows: 50px minmax(100px, 1fr) minmax(100px, 1fr) 100px 50px;
grid-column-gap: 10px;
max-width: 700px;
}
.container h1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.container .description {
grid-column: 1/2;
grid-row: 2/5;
/* height: 500px; */
}
.container .features {
grid-column: 2 /3;
grid-row: 2 / 3;
/* height: 100px */
}
.container .tick-features {
grid-column: 2 /3;
grid-row: 3 / 4;
/* height: 100px; */
}
.container .static-map {
grid-column: 2 /3;
grid-row: 4 / 5;
}
.container .full-width {
grid-column: 1 / 3;
grid-row: 5 / 6;
}
}
<div class="container">
<h1>HEADER</h1>
<div class="features">Features</div>
<div class="description">Description</div>
<div class="tick-features">Tick features</div>
<div class="static-map">Static Map</div>
<div class="full-width">Full width div</div>
</div>
This question already has answers here:
Why is percentage height not working on my div? [duplicate]
(2 answers)
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 3 years ago.
My layout looks as I expect in Firefox, but not in Safari or Chrome.
The white header element should be above the photo, not overlapping it.
CodePen Example: https://codepen.io/ivanoats/pen/byvXdq
HTML:
<header role="banner">
<div class="logo">
<div class="logotype">Good ❖ Paddle</div>
</div>
<nav class="main-nav">
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="label-toggle"></label>
<nav class="nav-wrapper">
<ul role="navigation">
<li>
About
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</nav>
</nav>
</header>
<div class="container">
<section class="hero">
<h1>What makes a good paddle?</h1>
<h2>
Let me know
</h2>
<img src="https://goodpaddle.com/images/semiahmoo.jpg" alt="pic of good stroke">
<p>Blade fin unlimited waves leash catch fin valve. Laird PFD aloha whitewater SUP dana point sesh kook foil, PFD board
bag downwind dana point PFD..</p>
</section>
</div>
CSS:
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
font-kerning: normal;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
box-sizing: border-box;
}
ol,
ul {
margin: 0;
padding: 0;
}
body {
font-family: "Century Gothic", CenturyGothic, AppleGothic, Helvetica, Arial,
sans-serif;
padding: 0;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 20%);
}
header {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 90%;
margin-left: 5vw;
margin-right: 5vw;
}
.main-nav {
margin-top: 0.5em;
}
.nav-wrapper {
margin: 0 auto;
max-width: 960px;
padding: 0;
}
.main-nav ul li {
margin-left: 0.5em;
margin-right: 0.5em;
display: inline-block;
}
.main-nav ul li a {
color: #000;
padding: 1em;
text-decoration: none;
transition: all 0.5s ease;
}
.logo {
width: 15%;
}
}
.hero {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
display: grid;
grid-column: 1 / 6;
justify-content: center;
align-items: center;
text-align: center;
}
.hero img {
max-width: 100%;
min-width: 100%;
z-index: -1;
grid-column: 1 / -1;
grid-row: 1 / 4;
object-fit: fill;
opacity: 0.85;
}
.hero p {
grid-column: 1 / -1;
grid-row: 4 / 5;
align-self: center;
width: 66%;
justify-self: center;
font-size: calc(0.75rem + 1vw);
line-height: 1.5;
margin: 0;
}
.content {
grid-column: 2 / 5;
grid-row-start: 3;
min-height: 200px;
line-height: 1.5em;
font-size: 1.3em;
}
What am I doing wrong, or how should I fix it for the currently available versions of Chrome and Safari?
The orange box won't span more than one column no matter what I set the "grid-column" to be.
Why is that?
I have tried the following: combinations: (It's the .hr-3 item)
grid-column: 6 / span 9;
grid-column: 6 / 9;
grid-column: 2 / 7;
grid-column: 2 / span 9;
I triple checked that I am targeting the right item.
Nothing seems to work..
#import url('https://fonts.googleapis.com/css?family=Montserrat|Teko');
html, body {
background: transparent;
width: 100%;
height: 100%;
}
#a {
margin: 50px 0 0 50px;
width: 70%;
height: 70%;
background: rgb(250,250,250);
display: grid;
grid-template-columns: auto auto 1px auto repeat(6, 2fr);
grid-template-rows: auto repeat(9,1fr);
//transform: rotate(-45deg);
grid-gap: 5px;
}
.item {
//background: rgba(100,100,0,0.02);
font-family: 'Montserrat', sans-serif;
}
.item-1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.item-2 {
grid-column: 2 / 3;
grid-row: 1 / span 3;
writing-mode: vertical-rl;
text-orientation: upright;
display: flex;
align-items: center;
padding-top: 3px;
}
.item-3 {
grid-column: 4 / 5;
grid-row: 1 / span 3;
writing-mode: vertical-rl;
text-orientation: upright;
display: flex;
align-items: center;
padding-top: 3px;
}
.item-4 {
grid-column: 5 / 6;
grid-row: 1 / 1;
}
.hr-1 {
grid-column: 3 / 4;
grid-row: 2 / span 3;
background: rgba(0,0,0,0.9);
}
.hr-2 {
grid-column: 6 / 7;
grid-row: 1 / span 8;
border-left: 25px solid red;
}
.hr-3 {
grid-column: 6 / span 9; // <------- DOESN'T WORK?
grid-row: 6/8;
border: 25px solid orange;
}
<div id="a">
<div class="item item-1"><b>John</b></div>
<div class="item item-2"><b>A</b>lexander</div>
<hr class="hr-1"/>
<div class="item item-3"><b>B</b>lue</div>
<div class="item item-4"><b>Peterson</b></div>
<div class="item item-5"></div>
<hr class="hr-2"/>
<hr class="hr-3"/>
<hr class="hr-4"/>
</div>
hr has a default margin set that is creating the issue. Make them equal to 0.
The default margin is set to auto so it's aligning your item (an empty one) inside the track which make you think your element isn't spaning the needed columns. What you will see in all the case is the 50px border you made (left+right)
#import url('https://fonts.googleapis.com/css?family=Montserrat|Teko');
html, body {
background: transparent;
width: 100%;
height: 100%;
}
#a {
margin: 50px 0 0 50px;
width: 70%;
height: 70%;
background: rgb(250,250,250);
display: grid;
grid-template-columns: auto auto 1px auto repeat(6, 2fr);
grid-template-rows: auto repeat(9,1fr);
//transform: rotate(-45deg);
grid-gap: 5px;
}
.item {
//background: rgba(100,100,0,0.02);
font-family: 'Montserrat', sans-serif;
}
.item-1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.item-2 {
grid-column: 2 / 3;
grid-row: 1 / span 3;
writing-mode: vertical-rl;
text-orientation: upright;
display: flex;
align-items: center;
padding-top: 3px;
}
.item-3 {
grid-column: 4 / 5;
grid-row: 1 / span 3;
writing-mode: vertical-rl;
text-orientation: upright;
display: flex;
align-items: center;
padding-top: 3px;
}
.item-4 {
grid-column: 5 / 6;
grid-row: 1 / 1;
}
.hr-1 {
grid-column: 3 / 4;
grid-row: 2 / span 3;
background: rgba(0,0,0,0.9);
}
.hr-2 {
grid-column: 6 / 7;
grid-row: 1 / span 8;
border-left: 25px solid red;
}
.hr-3 {
grid-column: 6 / span 9;
grid-row: 6/8;
border: 5px solid orange;
}
hr {
margin:0;
}
<div id="a">
<div class="item item-1"><b>John</b></div>
<div class="item item-2"><b>A</b>lexander</div>
<hr class="hr-1"/>
<div class="item item-3"><b>B</b>lue</div>
<div class="item item-4"><b>Peterson</b></div>
<div class="item item-5"></div>
<hr class="hr-2"/>
<hr class="hr-3"/>
<hr class="hr-4"/>
</div>
Here is what you can see using the dev tools and by keeping the default margin:
You can see that the element is taking 9 column and 2 rows and the margin is centering everything inside.
I have a layout which is a mixture of 3 and 2 columns(attached image below), i need to know if this layout is achievable in css grids using single container as i have already tried using it with grid-template-areas and row/col spaning but couldn't figure it out. The problem is with defining grid-template-columns where i have defined it with 3 cols to have my 3 col layout but for the bottom row i need two col 50% each. Any help will be appreciated.
Here is my code.
:root {
--yellow: #ffc600;
--black: #272727;
}
html {
/* border-box box model allows us to add padding and border to our elements without increasing their size */
box-sizing: border-box;
/* A system font stack so things load nice and quick! */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 900;
font-size: 10px;
color: var(--black);
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
}
/*
WAT IS THIS?!
We inherit box-sizing: border-box; from our <html> selector
Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-image: url("./images/topography.svg"),
linear-gradient(110deg, #f93d66, #6d47d9);
background-size: 340px, auto;
min-height: calc(100vh - 100px);
margin: 50px;
/* background: white; */
background-attachment: fixed;
letter-spacing: -1px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 5px 0;
}
/* Each item in our grid will contain numbers */
.item {
/* We center the contents of these items. You can also do this with flexbox too! */
display: grid;
justify-content: center;
align-items: center;
border: 5px solid rgba(0, 0, 0, 0.03);
border-radius: 3px;
font-size: 35px;
background-color: var(--yellow); /* best colour */
}
.item p {
margin: 0 0 5px 0;
}
/*layout*/
.container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.item-1{
grid-row: span 2;
}
.item-4{
grid-column: 3 / 3;
grid-row: 1 / span 2;
}
.item-5,.item-6{
grid-row: span 2;
}
.item-10{
grid-column: span 2;
}
<div class="container">
<div class="item item-1">
1
</div>
<div class="item item-2">
2
</div>
<div class="item item-3">
3
</div>
<div class="item item-4">
4
</div>
<div class="item item-5">
5
</div>
<div class="item item-6">
6
</div>
<div class="item item-7">
7
</div>
<div class="item item-8">
8
</div>
<div class="item item-9">
9
</div>
<div class="item item-10">
10
</div>
<div class="item item-11">
11
</div>
<div class="item item-12">
12
</div>
</div>
You can do that. Here is the edited CSS:
:root {
--yellow: #ffc600;
--black: #272727;
}
html {
/* border-box box model allows us to add padding and border to our elements without increasing their size */
box-sizing: border-box;
/* A system font stack so things load nice and quick! */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 900;
font-size: 10px;
color: var(--black);
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
}
/*
WAT IS THIS?!
We inherit box-sizing: border-box; from our <html> selector
Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-image: url("./images/topography.svg"),
linear-gradient(110deg, #f93d66, #6d47d9);
background-size: 340px, auto;
min-height: calc(100vh - 100px);
margin: 50px;
/* background: white; */
background-attachment: fixed;
letter-spacing: -1px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 5px 0;
}
/* Each item in our grid will contain numbers */
.item {
/* We center the contents of these items. You can also do this with flexbox too! */
display: grid;
justify-content: center;
align-items: center;
border: 5px solid rgba(0, 0, 0, 0.03);
border-radius: 3px;
font-size: 35px;
background-color: var(--yellow); /* best colour */
}
.item p {
margin: 0 0 5px 0;
}
/*layout*/
.container{
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 20px;
}
.item-1{
grid-row: span 2;
grid-column: span 2;
}
.item-2{
grid-column: span 2;
}
.item-3{
grid-row: 2 / 3;
grid-column: 3 / 5;
}
.item-4{
grid-column: 5 / 7;
grid-row: 1 / span 2;
}
.item-5, .item-6{
grid-row: span 2;
grid-column: span 2;
}
.item-7, .item-8{
grid-column: span 2;
}
.item-9{
grid-row: span 2;
grid-column: span 2;
}
.item-10{
grid-row: span 2;
grid-column: span 4;
}
.item-11{
grid-row: span 2;
grid-column: span 3;
}
.item-12{
grid-row: span 2;
grid-column: span 3;
}