I'm trying to recreate this design from frontendmentor.com.
My initial thought when I saw the design was to split the card section of the page into a 6x4 grid but so far it hasn't really worked. The grid isn't displaying the columns and rows the way I'd like. I tried building some placeholder rows in the areas where there's no content but that didn't work either.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Four Card Feature Section</title>
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<main role="landing-page">
<section class="heading">
<header class="text">
<h1 class="title-text">Reliable, efficient delivery <br> Powered by technology </h1>
<p class="subtitle-text">Our Artificial Intelligence powered tools use millions of project data <br> points to ensure that your project is successful </p>
</header>
</section>
<div class="grid-container">
<!--Column 1 -->
<div class="column column-left">
<h2 class="title-card">Supervisor</h2>
<p class="subtitle-card">Monitors activity to identify project <br> roadblocks </p>
<img src="icon-supervisor.svg" class="icon" alt="supervisor-icon" /></img>
</div>
<!--Column 2 -->
<div class="column column-middle-a">
<h2 class="title-card">Team Builder</h2>
<p class="subtitle-card">Scans our talent network to create the <br> optimal team for your project </p>
<img src="icon-team-builder.svg" class="icon" alt="teambuilder-icon" /></img>
</div>
<div class="column column-middle-b">
<h2 class="title-card">Karma</h2>
<p class="subtitle-card">Regularly evaluates our talent to ensure <br> quality </p>
<img src="icon-karma.svg" class="icon" alt="karma-icon" /></img>
</div>
<!--Column 3-->
<div class="column column-right">
<h2 class="title-card">Calculator</h2>
<p class="subtitle-card">Uses data from past projects to provide <br> better delivery estimates </p>
<img src="icon-calculator.svg" class="icon" alt="calculator-icon" /></img>
</div>
</div>
</main>
</body>
</html>
CSS
* {
border: 1px solid black;
}
:root {
--gray-text: #696969;
--dark-text: #171717;
}
.column .icon {
right: -15em;
position: relative;
}
.heading {
text-align: center;
align-content: auto;
font-family: David;
}
.title-text {
color: var(--dark-text);
}
.subtitle-text {
color: var(--gray-text);
}
.column .subtitle-card {
color: var(--gray-text);
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
grid-gap: 10px;
padding: 20em;
}
/*
.empty-row-1 {
grid-column: 1 / 2;
grid-row: 1;
}
.empty-row-2 {
grid-column: 1 / 2;
grid-row: 4;
}
.empty-row-3 {
grid-column: 5 / 6;
grid-row: 1;
}
.empty-row-4 {
grid-column: 5 / 6;
grid-row: 4;
}
*/
.column-left {
grid-column: 1 / 2;
grid-row: 2 / 3;
text-align: left;
}
.column-middle-a {
grid-column: 3 / 4;
grid-row: 1 / 2;
text-align: left;
}
.column-middle-b {
grid-column: 3 / 4;
grid-row: 3 / 4;
text-align: left;
}
.column-right {
grid-column: 5 / 6;
grid-row: 2 / 3;
text-align: left;
}
I commented out the placeholder rows since they didn't work. I removed them from the html file for clutter purposes, but they were just: <div class="empty-row-x"></div>
I have 1px border on all elements just so I can better see what I'm doing. Of course that isn't meant to stick around forever.
I have a feeling that my "grid approach" is just not the easiest or "correct" way to build this design. Having the "floating" rows in columns 1 and 3 seems awkward and I haven't been able to find any such examples on the usual websites.
Thanks for any help!
Here, you have grid-template-columns: auto auto auto auto auto auto;. You also need grid-template-area property as well where you will describe how you want your grid to look like and then you apply that into elements in which you've applied grid.
For instance if I have three columns and I want it to be like:
Column1 Column2
Column1 Column3
then I have to apply grid-template-area where I will describe it as:
grid-template-areas: "item1 item2,
item1 item3"
then,I will put it in columns as well
column1 {
grid-area: item1;
}
column2 {
grid-area: item2;
}
column3 {
grid-area: item3;
}
Related
First, it is a loop in React and assumed as a mobile version.
Within each loop of DIV, it will have a photo(150*150px) on the left-hand side.
On the photo's right-hand side, it will have 3 div and each of the div will have a p (name, car and salary). At the bottom, it will have a line and its length will be the same as the parent div.
One special is that the pof car will have many words, when the width of the phone is not enough, it will go to the next line. If it is still not enough, it will become Tesla, Honda, BMW,...
it is the Sample Image
I really try many methods(float, position,...), but I still cant deal with it,
Here is the HTML part (using React)
<div className='loop'>
<img className='image' src={value.image}></img>
<div>
<p className='title'>{value.name}</p>
</div>
<div class>
<p className='car'>Tesla, Honda, BMW, Porsch,Mitsubishi, Mazda, Toyota, Jaguar, KIA </p>
</div>
<div>
<p>{value.salary}</p>
</div>
<div className='linebreak'></div>
</div>
Try with grid :
.loop {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: .5em;
width: 400px
}
.image {
grid-row: span 3;
}
.linebreak {
margin-top: .5em;
grid-column: span 2;
border: 2px solid #4f86f7;
}
.loop p, img {
border: 2px solid #777696;
margin: 0;
}
.title {
align-self: start;
}
.salary {
align-self: end;
}
<div class='loop'>
<img class='image' src="https://picsum.photos/100" />
<p class='title'>name</p>
<p class='car'>Tesla, Honda, BMW, Porsch,Mitsubishi, Mazda, Toyota, Jaguar, KIA </p>
<p class='salary'>salary</p>
<div class='linebreak'></div>
</div>
What I want to do is make my sidebar cards be on the right and not the left. I've tried to use the display: grid; and that didn't work. I've tried to use the left: 0; and right: 0; in css. Nothing is working for me. My full code is at github.com.
Please ingnore the colors, I tried to draw it in google drawings so it's not good.
This is how it is:
And this is how I want it to look:
You could use a grid like this. For detail explanations check here
*,
:before,
:after {
box-sizing: border-box;
}
body {
display: grid;
grid-gap: 10px;
grid-template-columns: 60% 40%;
grid-template-areas: "header header" "content cards";
width: 100%;
}
#header {
grid-area: header;
}
#content {
grid-area: content;
}
#cards {
grid-area: cards;
}
<h3 id="header">Welcome to my GitHub Pages website this is where you can learn about me, find my games, and suggest ideas for anything!</h3>
<div id="content">
</div>
<div id="cards" class="cards">
<div id="project1" class="project-card">
<h1>
Web Designer Tycoon
</h1>
<p>This is a idle tycoon like game where you have to make money by making web programs. People buy your web programs for money. If you get better at coding (in the game) then you will get more money for each program you make. Itis currently in the BETA
stage and it will get released after lots of testing and a couple more changes. Thank you for your patience. <span onclick="window.location.href = 'https://codepen.io/hacker19374/project/full/Zyraey/'">Click me to go to Web Designer Tycoon</span></p>
</div>
<div id="project2" class="project-card">
<h1>
Burger Clicker
</h1>
<p>This game is a little bit different. It is a clicker game where you clic and click and click over and over to try to get the most money you can and you can use that money to buy</p>
</div>
</div>
There are multiple ways to achieve this. But since you are using css grid do the following:
Add an extra class of project-card__1 and project-card__2 to the cards and then specify the grid-template-columns in your css.
See the demo below
p {
background-color: #179595;
width: auto;
}
.project-card {
margin: 5px;
width: 25%;
border: 4px solid #00688b;
background-color: #008b8b;
height: 354.33px;
margin-bottom: 50px;
margin-right: 50px;
}
h1 {
text-align: center;
padding-top: 5px;
}
body {
background-image: linear-gradient(270deg, #8b0046, #8b008b);
height: 100vh;
}
span {
cursor: ;
}
.cards {
display: grid;
grid-template-columns: repeat(6, 1fr);
right: 0;
}
.project-card__1 {
grid-column: 5 / 7;
grid-row: 1;
width: 100%;
}
.project-card__2 {
grid-column: 5 / 7;
grid-row: 2;
width: 100%;
}
<h3>
Welcome to my GitHub Pages website this is where you can learn about me,
find my games, and suggest ideas for anything!
</h3>
<div id="cards" class="cards">
<div id="project1" class="project-card project-card__1">
<h1>Web Designer Tycoon</h1>
<p>
This is a idle tycoon like game where you have to make money by making
web programs. People buy your web programs for money. If you get
better at coding (in the game) then you will get more money for each
program you make. Itis currently in the BETA stage and it will get
released after lots of testing and a couple more changes. Thank you
for your patience.
<span
onclick="window.location.href = 'https://codepen.io/hacker19374/project/full/Zyraey/'"
>Click me to go to Web Designer Tycoon</span
>
</p>
</div>
<div id="project2" class="project-card project-card__2">
<h1>Burger Clicker</h1>
<p>
This game is a little bit different. It is a clicker game where you
clic and click and click over and over to try to get the most money
you can and you can use that money to buy
</p>
</div>
</div>
I'm trying to assemble this webpage with the format of
name picture info
name picture info
name picture info
name picture info
Within the main part of the code.
When ever i activate the grid it automatically places the element in
Name 4 times side by side
pic
info
And I'm unable to change the position.
Here is the HTML code:
.head {
font-size: 100px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: bold;
padding: 25px 50px 25px;
background-color: orange;
color: blue;
text-shadow: white 5px 5px 5px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
}
li {
float: left;
}
li a {
display: block;
color: orange;
text-align: center;
padding: 14px 20px;
}
li a:hover:not(.active) {
background-color: rgb(255, 255, 255);
}
.active {
background-color: white;
}
img {
border: 1px solid rgb(105, 105, 105);
height: 200px;
padding: 10px;
width: 300px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(186, 0, 177, 0.5);
}
.mainweb {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto auto;
grid-gap: 10px;
padding: 10px;
background-color: orange;
}
.mainweb .name {
font-weight: bold;
font-size: 25px;
}
.footer {
text-align: center;
background-color: blue;
color: white;
}
#Sasuke.name {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
#Sasuke .pic {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
#Sasuke .info {
grid-row: 2 / 3;
grid-column: 3 / 4;
}
.Kakashi .name {
grid-column: ;
grid-row: 3 / 4;
}
.Kakashi .pic {
grid-row: 3 / 4;
grid-column: ;
}
.Kakashi .info {
grid-row: 3 / 4;
grid-column: ;
}
.Gaara .name {
grid-column: ;
grid-row: 4 / 5;
}
.Gaara .pic {
grid-row: 4 / 5;
grid-column: ;
}
.footer {
text-align: center;
}
<link rel="stylesheet" type="text/css" href="css.css">
<div class="head">
<header>Naruto Wiki</header>
</div>
<div class="menu">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>About</li>
<li>Donate</li>
<li>Contact Us</li>
</ul>
</div>
<div class="container">
<div class="mainweb">
<div id="Naruto">
<p class="name">Naruto Uzamaki</p>
<a href="/Graphics/Naruto.png">
<img class="pic" src="/Graphics/Naruto.png" alt="Naruto">
</a>
<p class="info">
Naruto Uzumaki (うずまきナルト, Uzumaki Naruto) is a shinobi of Konohagakure's Uzumaki clan. He became the jinchūriki of the Nine-Tails on the day of his birth — a fate that caused him to be shunned by most of Konoha throughout his childhood. After joining Team
Kakashi, Naruto worked hard to gain the village's acknowledgement all the while chasing his dream to become Hokage. In the following years, through many hardships and ordeals, he became a capable ninja regarded as a hero both by the villagers,
and soon after, the rest of the world, becoming known as the Hero of the Hidden Leaf (木ノ葉隠れの英雄, Konohagakure no Eiyū, Literally meaning: Hero of the Hidden Tree Leaves). He soon proved to be one of the main factors in winning the Fourth Shinobi
World War, leading him to achieve his dream and become the village's Seventh Hokage (七代目火影, Nanadaime Hokage, Literally meaning: Seventh Fire Shadow).
</p>
</div>
<div id="Sasuke">
<p class="name">Sasuke Uchiha</p>
<a href="/Graphics/Sasuke.png">
<img id src="/Graphics/Sasuke.png" alt="Sasuke">
</a>
<p class="info">
Sasuke Uchiha (うちはサスケ, Uchiha Sasuke) is one of the last surviving members of Konohagakure's Uchiha clan. After his older brother, Itachi, slaughtered their clan, Sasuke made it his mission in life to avenge them by killing Itachi. He is added to Team
7 upon becoming a ninja and, through competition with his rival and best friend, Naruto Uzumaki, Sasuke starts developing his skills. Dissatisfied with his progress, he defects from Konoha so that he can acquire the strength needed to exact his
revenge. His years of seeking vengeance and his actions that followed become increasingly demanding, irrational and isolates him from others, leading him to be branded as an international criminal. After learning the truth of his brother's sacrifice,
later proving instrumental in ending the Fourth Shinobi World War, and being happily redeemed by Naruto, Sasuke decides to return to Konoha and dedicate his life to help protect the village and its inhabitants, becoming referred to as the "Supporting
Kage" (支う影, Sasaukage, Literally meaning: Supporting Shadow).
</p>
</div>
<div id="Kakashi">
<p class="name">Kakashi Hatake</p>
<a href="/Graphics/Kakashi.jpg">
<img src="/Graphics/Kakashi.jpg" alt="Kakashi">
</a>
<p class="info">
Kakashi Hatake (はたけカカシ, Hatake Kakashi) is a shinobi of Konohagakure's Hatake clan. Famed as Kakashi of the Sharingan (写輪眼のカカシ, Sharingan no Kakashi), he is one of Konoha's most talented ninja; regularly looked to for advice and leadership despite his
personal dislike of responsibility. To his students on Team 7, Kakashi teaches the importance of teamwork, a lesson he received, along with the Sharingan, from his childhood friend, Obito Uchiha. After the Fourth Shinobi World War, Kakashi becomes
Konoha's Sixth Hokage (六代目火影, Rokudaime Hokage, Literally meaning: Sixth Fire Shadow).
</p>
</div>
<div id="Gaara">
<p class="name">Gaara</p>
<a href="/Graphics/Gaara.png">
<img src="/Graphics/Gaara.png" alt="Gaara">
</a>
<p class="info">
Gaara (我愛羅) is a shinobi of Sunagakure. He was made the jinchūriki of the One-Tailed Shukaku before he was born, causing the villagers of Suna to fear him as a monster. With nobody to connect to, Gaara grew up hating the world and looking out only for
himself, giving his life meaning by killing anyone he came across. After being defeated by Naruto Uzumaki — a jinchūriki like himself who found strength in his friendships — Gaara starts emulating him. He becomes Suna's Fifth Kazekage (五代目風影,
Godaime Kazekage, Literally meaning: Fifth Wind Shadow) so that he can protect the village and all those who live there, dispelling the fears he cast on the villagers.
</p>
</div>
</div>
</div>
<div class="footer">
All information has been provided by https://naruto.fandom.com/wiki/Narutopedia Naruto Wiki | 2020
</div>
Right now, your grid only apply on the child elements of your .mainweb class.
So only
<div id="naruto">..</div>
<div id="Sasuke">..</div>
<div id="Kakashi">..</div>
<div id="Gaara">..</div>
what you can do is to apply your grid on each inner children and making each children just display: block if you want them one below the other.
If you want to keep the display: grid
then you can make you css like
Change your .mainweb by .mainweb>div to apply to all children
.mainweb>div {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto;
grid-gap: 10px;
padding: 10px;
background-color: orange;
}
Or other solution is simply by using display: flex
it will keep your content more responsive.
.mainweb>div {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background-color: orange;
}
Change html like this:
<div id="Naruto">
<div class="leftSection">
<p class="name">Naruto Uzamaki</p>
<a href="/Graphics/Naruto.png">
<img class="pic" src="/Graphics/Naruto.png" alt="Naruto">
</a>
</div>
<p class="info">
Naruto Uzumaki (うずまきナルト, Uzumaki Naruto) is a shinobi of Konohagakure's Uzumaki clan. He became the jinchūriki of the Nine-Tails
on the day of his birth — a fate that caused him to be shunned by most of Konoha throughout his childhood. After
joining Team Kakashi, Naruto worked hard to gain the village's acknowledgement all the while chasing his dream
to become Hokage. In the following years, through many hardships and ordeals, he became a capable ninja regarded
as a hero both by the villagers, and soon after, the rest of the world, becoming known as the Hero of the Hidden
Leaf (木ノ葉隠れの英雄, Konohagakure no Eiyū, Literally meaning: Hero of the Hidden Tree Leaves). He soon proved to be
one of the main factors in winning the Fourth Shinobi World War, leading him to achieve his dream and become
the village's Seventh Hokage (七代目火影, Nanadaime Hokage, Literally meaning: Seventh Fire Shadow).
</p>
</div>
And add css :
.leftSection{
width: 25%;
float: left;
}
.mainweb .name {
font-weight: bold;
font-size: 25px;
display: inline;
}
p.info{
width: 70%;
float: right;
}
I have a html template like the following:
<div class="my-grid-container">
<div class="summary-card" ng-repeat="cardData in summaryCardsCtrl.summaryDetails" >
<div ng-include="'.....'"></div>
</div>
</div>
The included html looks like:
<div class="card">
<div class="card-title" id="{{cardData.label}}">{{cardData.label}}</div>
<div class="card-data">
<div class="card-ico">
.....
</div>
<div class="card-value">
<span title="{{cardData.rawValue}}">{{cardData.value}}</span>
<span>%</span>
</div>
</div>
</div>
I want the first card to span for two rows, like:
I am using CSS3 GridBox like the following:
.my-grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
padding: 10px;
}
.my-grid-container > div {
text-align: center;
padding: 20px 0;
font-size: 30px;
max-height: 70px;
}
div.my-grid-container > div.card:first-child {
grid-row: 1 / 2;
}
But it did not work till now. First div did not span two rows.
What am I doing wrong?
Your code:
div.my-grid-container > div.card:first-child {
grid-row: 1 / 2;
}
You're telling the grid item to span from grid row line 1 to grid row line 2. That spans one row.
If you want to span two rows, then use this instead:
div.my-grid-container > div.card:first-child {
grid-row: 1 / 3;
}
or this:
div.my-grid-container > div.card:first-child {
grid-row: 1 / span 2;
}
Keep in mind that in every grid the number of row lines is equal to the number of rows + 1, because the last row has an extra (final) line. The same concept applies to columns.
Firefox offers a useful tool for seeing this.
In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. On click it displays an outline of your grid.
More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
I'm trying to achieve the following with CSS Grid Layout:
A A
B B B B B B B B
C C E E E E E
D D D
F F F
I can add classes in the HTML but I cannot re-order the elements or add wrapping elements.
I have almost achieved this by using explicit grid-row values. Is it possible to position the last two rows starting at the fourth column without explicitly specifying the grid-column property individually for each element? (For brevity I've kept it to 6 here but there's more in the actual layout)
Here's what I have so far. As you can see, the two rows for E and F start on column 1.
I can add grid-column: 4 to .c13 but the subsequent elements in the row flow back to column 1.
.grid {
display: grid;
grid-template-rows: repeat(5, 2em);
grid-gap: 0.5em;
text-align: center;
}
.c2 {
grid-column: 8;
}
.c16 {
grid-column: 4;
}
.extra1 {
grid-row: 4;
}
.extra2 {
grid-row: 5;
}
.global1 { background-color: #ccc; }
.intra1 { background-color: lightblue; }
.intra2 { background-color: yellow; }
.intra3 { background-color: purple; color: white; }
.extra1 { background-color: orange; }
.extra2 { background-color: #f66; }
<p>You need a browser that supports CSS Grid Layout for this.</p>
<section class='grid'>
<div class='c1 global1'>A</div>
<div class='c2 global1'>A</div>
<div class='c3 intra1'>B</div>
<div class='c4 intra1'>B</div>
<div class='c5 intra1'>B</div>
<div class='c6 intra1'>B</div>
<div class='c7 intra1'>B</div>
<div class='c8 intra1'>B</div>
<div class='c9 intra1'>B</div>
<div class='c10 intra1'>B</div>
<div class='c11 intra2'>C</div>
<div class='c12 intra2'>C</div>
<div class='c13 extra1'>D</div>
<div class='c14 extra1'>D</div>
<div class='c15 extra1'>D</div>
<div class='c16 intra3'>E</div>
<div class='c17 intra3'>E</div>
<div class='c18 intra3'>E</div>
<div class='c19 intra3'>E</div>
<div class='c20 intra3'>E</div>
<div class='c21 extra2'>F</div>
<div class='c22 extra2'>F</div>
<div class='c23 extra2'>F</div>
</section>
You can add pseudo-elements to the .grid to block out the bits you don't want to use. CSS Grid will treat the pseudo-element as a grid-item and use up the space specified.
In your case these rules should work:
.grid:before{
content:'';
grid-column: 1 / 4;
grid-row: 4 / -1;
}
.grid:after{
content:'';
grid-column: 7 / 10;
grid-row: 4 / -1;
}
Here's an example of it for you to play with: https://codepen.io/chrisboon27/pen/Lddpqa
I added in the text and background-color to make it easier to see what is going on, but you would just remove those.