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;
}
Related
I have a webpage where the css for the small and medium size work and display fine. my problem is with the large, everything is formatted correctly except that the page picture won't display. How do I fix this? Attached is the page layout and the full css. The error should be under the #media(min-width: 1024px)
header {
background-color: #002171;
color: #FFFFFF;
background-position: right;
background-repeat: no-repeat;
}
header a:link {
color: #FFFFFF;
text-decoration-line: none;
}
header a:visited {
color: #FFFFFF;
text-decoration-line: none;
}
header a:hover {
color: #90C7E3;
}
h1 {
margin-top: 0;
margin-bottom: 0;
text-align: center;
font-family: Georgia, serif;
letter-spacing: 0.25em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
* {
box-sizing: border-box;
}
nav {
font-weight: bold;
font-size: 120%;
padding: 0;
text-align: center;
}
nav li {
border-bottom: none;
}
nav a {
text-decoration: none;
}
section {
padding-left: 2em;
padding-right: 2em;
}
h2 {
color: #1976D2;
font-family: Georgia, serif;
text-shadow: 1px 1px 1px #CCCCCC;
}
h3 {
color: #000033;
font-family: Georgia, serif;
}
#media(min-width: 600px) {
nav ul {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
justify-content: space-around;
}
.content main {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
}
h2 {
grid-row: 1 / 2;
grid-column: 1 / 5;
}
section {
grid-row: 2 / 3;
grid-column: auto;
}
#special {
grid-row: auto;
grid-column: 1 / 5;
}
footer {
grid-row: auto;
grid-column: 1 / 5;
}
}
#media(min-width: 1024px) {
nav ul {
flex-direction: column;
padding-top: 1em;
}
nav {
text-align: left;
padding-left: 1em;
padding-right: 1em;
grid-row: 2/3;
grid-column: 1/2;
}
main {
grid-row: 2/3;
grid-column: 2/3;
}
footer {
grid-row: 3/4;
grid-column: 2/4;
}
header {
grid-row: 1/2;
grid-column: 1/4;
}
#wrapper {
margin: auto;
width: 80%;
border: #00008B;
box-shadow: 1px 1px 1px;
display: grid;
grid-row: 3/3;
grid-column: 2/2;
}
}
}
main ul {
list-style-image: url('marker.gif');
font-family: Georgia, serif;
}
nav ul {
list-style: none;
margin: 0;
padding-left: 0;
font-size: 1.2em;
}
nav a:link {
color: #5C7FA3;
}
nav a:visited {
color: #344873;
}
nav a:hover {
color: #A52A2A;
}
body {
font-family: Helvetica;
background-color: #EAEAEA;
color: #666666;
}
main {
background-color: #FFFFFF;
padding-top: 1px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 30px;
overflow: auto;
display: block;
}
dt {
color: #002171;
}
#wrapper {
background-color: #90C7E3;
background-image: linear-gradient(#FFFFFF, #90C7E3);
}
#homehero {
background-image: url('coast2.jpg');
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#yurthero {
background-image: url('yurt.jpg');
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#trailhero {
background-image: url('trail.jpg');
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.resort {
font-weight: bold;
color: #1976D2;
}
footer {
background-color: #FFFFFF;
font-family: Georgia, serif;
font-size: 75%;
font-style: italic;
text-align: center;
padding: 2em;
}
#contact {
font-size: 90%;
}
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<div id="homehero">
</div>
<main>
<h2>Enjoy Nature in Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails Resort includes a sumptuously appointed private yurt and a cooked-to-order
breakfast each morning.</p>
<ul>
<li>Unwind in the heated outdoor pool and whirlpool</li>
<li>Explore the coast on your own or join our guided tours</li>
<li>Relax in our lodge while enjoying complimentary appetizers and beverages</li>
<li>Savor nightly fine dining with an ocean view</li>
</ul>
<div id="contact">
<span class="resort">Pacific Trails Resort</span><br> 12010 Pacific Trails Road <br> Zephyr, CA 95555<br>
<br> 888-555-5555
<br>
</div>
</main>
<footer>
Copyright © 2020 Pacific Trails Resort<br>
freed.nm#rhodesstate.edu
</footer>
</div>
From what I understand your image does not appear when the screen size is greater than 1024px. I made some changes to the code and got it to work as you wish, I think ...
I hope that's what you want
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacific Trails Resort</title>
<!-- <link rel="stylesheet" href="pacific.css"> -->
<meta charset="utf-8">
<style>
header {
background-color: #002171;
color: #FFFFFF;
background-position: right;
background-repeat: no-repeat;
}
header a:link {
color: #FFFFFF;
text-decoration-line: none;
}
header a:visited {
color: #FFFFFF;
text-decoration-line: none;
}
header a:hover {
color: #90C7E3;
}
h1 {
margin-top: 0;
margin-bottom: 0;
text-align: center;
font-family: Georgia, serif;
letter-spacing: 0.25em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
* {
box-sizing: border-box;
}
nav {
font-weight: bold;
font-size: 120%;
padding: 0;
text-align: center;
}
nav li {
border-bottom: none;
}
nav a {
text-decoration: none;
}
section {
padding-left: 2em;
padding-right: 2em;
}
h2 {
color: #1976D2;
font-family: Georgia, serif;
text-shadow: 1px 1px 1px #CCCCCC;
}
h3 {
color: #000033;
font-family: Georgia, serif;
}
#media(min-width: 600px) {
nav ul {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
justify-content: space-around;
}
.content main {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
}
h2 {
grid-row: 1 / 2;
grid-column: 1 / 5;
}
section {
grid-row: 2 / 3;
grid-column: auto;
}
#special {
grid-row: auto;
grid-column: 1 / 5;
}
footer {
grid-row: auto;
grid-column: 1 / 5;
}
}
#media(min-width: 1024px) {
nav ul {
flex-direction: column;
padding-top: 1em;
}
nav {
text-align: left;
padding-left: 1em;
padding-right: 1em;
grid-row: 2/3;
grid-column: 1/2;
}
main {
grid-row: 2/3;
grid-column: 2/3;
}
footer {
grid-row: 3/4;
grid-column: 2/4;
}
header {
grid-row: 1/2;
grid-column: 1/4;
}
#wrapper {
margin: auto;
width: 80%;
border: #00008B;
box-shadow: 1px 1px 1px;
display: grid;
grid-row: 3/3;
grid-column: 2/2;
}
}
}
main ul {
list-style-image: url('marker.gif');
font-family: Georgia, serif;
}
nav ul {
list-style: none;
margin: 0;
padding-left: 0;
font-size: 1.2em;
}
nav a:link {
color: #5C7FA3;
}
nav a:visited {
color: #344873;
}
nav a:hover {
color: #A52A2A;
}
body {
font-family: Helvetica;
background-color: #EAEAEA;
color: #666666;
}
main {
background-color: #90C7E3;
padding-top: 1px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 30px;
overflow: auto;
display: block;
}
dt {
color: #002171;
}
#wrapper {
background-color: #90C7E3;
background-image: linear-gradient(#FFFFFF, #90C7E3);
}
#homehero {
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#yurthero {
background-image: url('yurt.jpg');
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#trailhero {
background-image: url('trail.jpg');
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.resort {
font-weight: bold;
color: #1976D2;
}
footer {
background-color: #EAEAEA;
font-family: Georgia, serif;
width: 100%;
font-size: 75%;
font-style: italic;
text-align: center;
padding: 22px;
}
#contact {
font-size: 90%;
}
.details {
padding: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<div id="homehero">
<img src="coast2.jpg" alt="Coast2 Image">
</div>
<hr>
<div class="wrap">
<main>
<h2>Enjoy Nature in Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the
California
North Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails Resort includes a
sumptuously appointed private yurt and a cooked-to-order breakfast each morning.</p>
<ul>
<li>Unwind in the heated outdoor pool and whirlpool</li>
<li>Explore the coast on your own or join our guided tours</li>
<li>Relax in our lodge while enjoying complimentary appetizers and beverages</li>
<li>Savor nightly fine dining with an ocean view</li>
</ul>
<div id="contact">
<span class="resort">Pacific Trails Resort</span><br>
12010 Pacific Trails Road <br>
Zephyr, CA 95555<br>
<br>
888-555-5555<br>
</div>
</main>
</div>
<!-- <footer>
Copyright © 2020 Pacific Trails Resort<br>
freed.nm#rhodesstate.edu
</footer> -->
<div class="details">
<h2>Details</h2>
<ul>
<li>Dedicated</li>
<li>Fast</li>
<li>Secure</li>
</ul>
<br><br>
<h2>Social Networks</h2>
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
<br><br>
<h2>Details</h2>
<ul>
<li>Dedicated</li>
<li>Fast</li>
<li>Secure</li>
</ul>
<br><br>
<h2>Social Networks</h2>
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
<br><br>
</div>
</div>
<br><br>
<footer>
Copyright © 2020 Pacific Trails Resort<br>
freed.nm#rhodesstate.edu
</footer>
</body>
</html>
Please leave any comments if any problems arise, I would like to help
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?
So basically I want my navigation bar to be fixed when I scroll the page down. But by changing its position from absolute to fixed, the links seem to overlap each other. Margin and Padding aren't working. How can I make them fixed and give some gap between each link? If there is something wrong with my code please correct me.
HTML
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
width: 500px;
height: 500px;
grid-gap: 10px;
background-color: white;
width: 100%;
height: 1500px;
justify-content: center;
}
span {
font-size: 30px;
cursor: pointer;
}
#elem_1 {
background-color: #F7F7F7;
grid-column: 1 / -1;
grid-row: 1 / 2;
width: 100%;
}
#elem_1>img {
width: 2.3vw;
height: 4vh;
position: relative;
left: 220px;
bottom: 9px;
}
#elem_1>h1 {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #505050;
position: relative;
left: 120px;
top: 30px;
}
nav a {
position: sticky;
right: 200px;
float: left;
margin-left: 20px;
text-decoration: none;
text-transform: uppercase;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 800;
color: grey;
}
#list_item_1 {
margin: 20px;
padding: 20px;
}
#nav_bar {
font-size: 20px;
}
nav a:hover {
background-color: pink;
}
nav {
display: block;
position: absolute;
bottom: 910px;
left: 1500px;
width: 100%;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 5px;
margin: 12px;
}
#three_bars {
display: none;
}
#three_bars:checked~nav {
display: block;
}
#three_bars_label {
position: fixed;
right: 35px;
top: 35px;
}
#elem_2 {
background-color: greenyellow;
grid-column: 1 / -1;
grid-row: 2 / 3;
}
#elem_3 {
background-color: aliceblue;
grid-column: 1 / 9;
grid-row: 3 / 12;
}
#elem_4 {
background-color: antiquewhite;
grid-column: 9 / -1;
grid-row: 3 / 12;
}
#elem_5 {
background-color: aquamarine;
grid-column: 1 / -1;
grid-row: 12 / -1;
}
<div class="container">
<div id="elem_1">
<h1>RDMC</h1>
<img src="./Images/HeartBeat.png">
<input type="checkbox" id="three_bars">
<nav>
<ul><span id="nav_bar">
<li class="list_item_1">Home</li>
<li class="list_item">Donate</li>
<li class="list_item">About us</li>
<li class="list_item">Contact</li></span>
</ul>
</nav>
<label for="three_bars" id="three_bars_label">
<span><i class="fas fa-bars"></i></span>
</label>
</div>
<div id="elem_2">Content</div>
<div id="elem_3">Payment</div>
<div id="elem_4">Address</div>
<div id="elem_5">Contact</div>
</div>
The main problem I could see with your css was the bottom:910px; and left:1500px positioning : you don't know how big the user's screen is going to be (I couldn't see the nav initially! ) I commented them out for a start, moved your margin for the list items into the list_item_1 css (shorthand for margin order is top right bottom left - clockwise - so I wrote it shorthand integrating the margin-bottom of 5px). Also, I added a display:inline-block; to your nav li.
Another (important) point to mention is that I moved your nav a code to AFTER your nav/ nav ul/nav li/ css, as css is read in the order it is written. As such, you should keep your css in logical order.
Hope this helps
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
width: 500px;
height: 500px;
grid-gap: 10px;
background-color: white;
width: 100%;
height: 1500px;
justify-content: center;
}
span {
font-size: 30px;
cursor: pointer;
}
#elem_1 {
background-color: #F7F7F7;
grid-column: 1 / -1;
grid-row: 1 / 2;
width: 100%;
}
#elem_1>img {
width: 2.3vw;
height: 4vh;
position: relative;
left: 220px;
bottom: 9px;
}
#elem_1>h1 {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #505050;
position: relative;
left: 120px;
top: 30px;
}
#nav_bar {
font-size: 20px;
}
nav {
display: inline-block;
position: sticky;
/* bottom: 910px;*/
/*left: 1500px;*/
width: 100%;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.list_item_1 {
margin: 12px 12px 5px 12px;
padding: 10px;
}
nav li {
display:inline-block;
/* margin: 12px 12px 5px 12px;*/
}
nav a {
display:inline-block;
float: left;
margin-left: 20px;
text-decoration: none;
text-transform: uppercase;
font-family: "Verdana", BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
font-weight: 800;
color:#000000;
}
nav a:hover {
background-color: pink;
}
#three_bars {
display: none;
}
#three_bars:checked~nav {
display: block;
}
#three_bars_label {
position: fixed;
right: 35px;
top: 35px;
}
#elem_2 {
background-color: greenyellow;
grid-column: 1 / -1;
grid-row: 2 / 3;
}
#elem_3 {
background-color: aliceblue;
grid-column: 1 / 9;
grid-row: 3 / 12;
}
#elem_4 {
background-color: antiquewhite;
grid-column: 9 / -1;
grid-row: 3 / 12;
}
#elem_5 {
background-color: aquamarine;
grid-column: 1 / -1;
grid-row: 12 / -1;
}
<div class="container">
<div id="elem_1">
<h1>RDMC</h1>
<img src="./Images/HeartBeat.png">
<input type="checkbox" id="three_bars">
<nav>
<ul id="nav_bar">
<li class="list_item_1">Home</li>
<li class="list_item_1">Donate</li>
<li class="list_item_1">About us</li>
<li class="list_item_1">Contact</li>
</ul>
</nav>
<label for="three_bars" id="three_bars_label">
<span><i class="fas fa-bars"></i></span>
</label>
</div>
<div id="elem_2">Content</div>
<div id="elem_3">Payment</div>
<div id="elem_4">Address</div>
<div id="elem_5">Contact</div>
</div>
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>
Chrome Version 60.0.3112.78 (Official Build) (64-bit) in Windows 7
I'm exploring CSS Grid layout and have come across an odd issue in Chrome (works fine in Firefox). I've created a simple registration form that I want to center horizontally and vertically on the page.
I use three nested grids to structure my layout.
html {
height: 100%;
}
body {
font-family: 'Rubik', sans-serif;
margin: 0;
padding: 0;
background: #aaffff;
height: 100%;
}
#root {
height: 100%;
}
button,
input,
label {
font-family: 'Rubik', sans-serif;
font-weight: 600;
}
label {
display: inline-block;
text-align: left;
}
.formGroup {
display: inline-block;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
a:link {
text-decoration: none;
color: inherit;
}
a:hover {
text-decoration: underline;
}
*:focus {
outline-width: 3px;
outline-color: rgba(66, 66, 66, 0.7);
outline-style: dashed;
outline-offset: 3px;
}
.Input {
color: #333;
border: none;
height: 2em;
padding: 5px 10px;
display: block;
/* width: 100%; */
}
.Input:focus {
outline-width: 3px;
outline-color: rgba(66, 66, 66, 0.7);
outline-style: dashed;
outline-offset: 3px;
}
.Button {
display: inline-block;
font-weight: 800;
text-align: center;
white-space: nowrap;
vertical-align: middle;
padding: 20px 40px;
border-radius: 4px;
border: none;
background: none;
position: relative;
text-transform: uppercase;
margin: 15px 30px;
}
.Button.primary {
background: #0000ff;
box-shadow: 0 9px #000088;
color: #fff;
}
.Button.primary:hover {
top: 5px;
box-shadow: 0 4px #000088;
}
.Button.primary:active {
top: 9px;
box-shadow: none;
}
.Button.primary:focus {
outline-width: 3px;
outline-color: rgba(0, 0, 255, 0.7);
outline-style: dashed;
outline-offset: 3px;
}
.RegistrationForm-container {
display: grid;
grid-template-columns: 3% auto 3%;
grid-template-rows: 100px 25% auto 25%;
}
.RegistrationForm-container .copy {
grid-column-start: 2;
grid-row-start: 2;
}
.RegistrationForm-container form {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
display: grid;
grid-template-columns: 1% auto 1%;
grid-template-rows: 25px auto 25px;
}
.RegistrationForm-container form .inner {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
display: grid;
grid-template-columns: 1% auto 1%;
grid-template-rows: 50px 50px;
}
.RegistrationForm-container form .inner .emailFormGroup {
grid-column-start: 2;
grid-row-start: 1;
margin: 0 auto;
}
.RegistrationForm-container form .inner .buttonFormGroup {
grid-column-start: 2;
grid-row-start: 2;
}
.App {
text-align: center;
height: 100%;
}
<div id="root">
<div class="App">
<div class="RegistrationForm-container">
<div class="copy">
<h1>Register</h1>
<p>
By registering, you agree to our
terms of use and privacy policy.
</p>
</div>
<form>
<div class="inner">
<div class="formGroup emailFormGroup">
<input
class="Input"
type="email"
placeholder="Email"
autocorrect="false"
/>
</div>
<div class="formGroup buttonFormGroup">
<button type="submit" class="Button primary">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
While, my grid layout does succeed centering, it misbehaves when the window is resized. When the window is resized larger than the original load size, and then narrowed, a scrollbar appears and the input and button get stuck off to the right.
Only after clicking somewhere in the page or tabbing between the button, input, and terms of use link will it correct itself and snap back into vertical/horizontal centeredness.
Here are demonstrations of the behavior:
https://codepen.io/jdoyle/pen/qXadXJ
https://plnkr.co/edit/rzAAAsfgPVUfxxmXlqYa?p=preview
Looks like margin:auto in a grid does start to act pretty weird.
A way to get the effect you want but avoiding the bug would be to set
text-align: center;
on the emailFormGroup and then remove the display: block on email input.
https://codepen.io/anon/pen/YxGyeG