I training by create the Google Homepage and I have an issue on the footer which has a line break in 2 columns.
#footer{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px,1fr));
grid-template-rows: 50px;
grid-template-areas:
"pub entreprise propos comment neutre infos confidentialite conditions parametres";
background-color: rgb(242, 242, 242);
}
<div id="footer">
Publicité
Entreprise
A propos
Comment fonctionne la recherche Google ?
Neutre en carbone depuis 2007
Infos consommateurs
Confidentialité
Conditions
Paramètres
You can add a white-space : nowrap and not use grid-template-columns to enforce fitting of text within fraction of screen. But also you will have to take care of the responsive behaviour when width decreases. If that's not the requirement then this shall work. Maybe on shrinking of screen use a media query to have 2 rows instead of just one.
#footer {
display: grid;
grid-template-rows: 50px;
grid-template-areas: "pub entreprise propos comment neutre infos confidentialite conditions parametres";
background-color: rgb(242, 242, 242);
white-space: nowrap;
}
<div id="footer">
Publicité
Entreprise
A propos
Comment fonctionne la recherche Google ?
Neutre en carbone depuis 2007
Infos consommateurs
Confidentialité
Conditions
Paramètres
First, it's important to note that your grid-template-areas definition is not mapped to the grid items. This is because you haven't defined the grid-area property for each item.
The wrapping problem can be solved with white-space: nowrap.
#footer {
display: grid;
grid-template-rows: 50px;
grid-template-areas: "pub entreprise propos comment neutre infos confidentialite conditions parametres";
grid-column-gap: 10px;
}
#pub { grid-area: pub; }
#entreprise { grid-area: entreprise; }
#propos { grid-area: propos; }
#comment { grid-area: comment; }
#neutre { grid-area: neutre; }
#infos { grid-area: infos; }
#confidentialite { grid-area: confidentialite; }
#conditions { grid-area: conditions; }
#parametres { grid-area: parametres; }
#footer > a {
white-space: nowrap;
padding: 0 25px;
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center;
}
<div id="footer">
Publicité
Entreprise
A propos
Comment fonctionne la recherche Google ?
Neutre en carbone depuis 2007
Infos consommateurs
Confidentialité
Conditions
Paramètres
</div>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 months ago.
Improve this question
This table layout using CSS GridI am new to CSS Grid and would like to know if the following can be achieved using grid layout.
Yes, you can do it.
You can generate CSS Grid layouts here
I have also generated one for you which would represent current situation.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas: "empty1 empty1 header1 header2 header3 empty2 empty2" "text1 text2 text3 text4 text5 text6 text7" "text8 text9 text10 text11 text12 text13 text14";
}
.text1 {
grid-area: text1;
}
.text2 {
grid-area: text2;
}
.text3 {
grid-area: text3;
}
.text4 {
grid-area: text4;
}
.text5 {
grid-area: text5;
}
.text6 {
grid-area: text6;
}
.text7 {
grid-area: text7;
}
.text14 {
grid-area: text14;
}
.text13 {
grid-area: text13;
}
.text12 {
grid-area: text12;
}
.text11 {
grid-area: text11;
}
.text10 {
grid-area: text10;
}
.text9 {
grid-area: text9;
}
.text8 {
grid-area: text8;
}
.empty1 {
grid-area: empty1;
}
.empty2 {
grid-area: empty2;
}
.header1 {
grid-area: header1;
}
.header2 {
grid-area: header2;
}
.header3 {
grid-area: header3;
}
<div class="container">
<div class="text1">text1</div>
<div class="text2">text2</div>
<div class="text3">text3</div>
<div class="text4">text4</div>
<div class="text5">text5</div>
<div class="text6">text6</div>
<div class="text7">text7</div>
<div class="text14">text14</div>
<div class="text13">text13</div>
<div class="text12">text12</div>
<div class="text11">text11</div>
<div class="text10">text10</div>
<div class="text9">text9</div>
<div class="text8">text8</div>
<div class="empty1"></div>
<div class="empty2"></div>
<div class="header1">HDR Item1</div>
<div class="header2">HDR Item2</div>
<div class="header3">HDR Item3</div>
</div>
The following script displays exactly the same on each side of the screen. What I am trying to discover is how to group one set of dl/dt/dd definitions to be left side as normal with the dd below the dt as multiple lines but another group that will show the dt/dd on the same single lines.
I cannot figure out how to create two different dt/dd displays for the same page.
If you execute the script with the dl/dt/dd section commented out and then a second time with it in you will see the effects I'm trying to achieve, but both the multiple line and single line displays occurring on the same page as the same display. I'm thinking that there must be a way to define the CSS statements to act differently at different places on the same page. Obviously I would not do the displays in a real project, the side-by-side display is for question demonstration purposes only.
Is there a way to do this?
I tried creating a class with the modified dl/dt/dd statements and then be referenced as a class. That approach does not seem to work.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> DL/DT/DD Demos </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<!-- See: https://medium.com/#jakehyer/css-grid-auto-fit-minmax-e54f99989668 -->
<style>
main {
display: grid;
gap: 0.25rem;
}
/* 12.5rem (9 boxes), 16 (7), 18 (6), 20 (5), 25 (4), 33rem (3), 40rem (2) all work */
/* */
.gridCols9 { grid-template-columns: repeat(auto-fit,minmax(12.5rem, 1fr)); }
.gridCols7 { grid-template-columns: repeat(auto-fit,minmax(16rem, 1fr)); }
.gridCols6 { grid-template-columns: repeat(auto-fit,minmax(18rem, 1fr)); }
.gridCols5 { grid-template-columns: repeat(auto-fit,minmax(20rem, 1fr)); }
.gridCols4 { grid-template-columns: repeat(auto-fit,minmax(25rem, 1fr)); }
.gridCols3 { grid-template-columns: repeat(auto-fit,minmax(33rem, 1fr)); }
.gridCols2 { grid-template-columns: repeat(auto-fit,minmax(40rem, 1fr)); }
/* */
main > fieldset { border: 1px solid black; }
.fontInfo {
white-space: pre-wrap;
font-family: monospace;
}
h3 {
background-color: lightgreen; text-align: center;
font-size: 1.2rem; cursor: pointer;
margin: 0; padding: 0;
}
article { margin-top: 0; display: block; }
/* Following from: https://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line */
/* Comment out following for entirely different display */
dl {
display: grid;
grid-template-columns: max-content auto;
}
dt { grid-column-start: 1; }
dd { grid-column-start: 2; }
/* */
</style>
</head><body>
<main class="gridCols4">
<fieldset> <legend> Normal </legend>
<article><h3>DL/DT/DD Display</h3></article>
<dl>
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>
</fieldset>
<fieldset> <legend> Modified </legend>
<article><h3>DL/DT/DD Display</h3></article>
<dl class="singleLines">
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>
</fieldset>
</main>
</body></html>
Maybe I'm missing something, but it seems like you just need to set the dt/dd's as child elements of dl with the '>' character. Here's an example showing the two different version views:
main {
display: grid;
gap: 0.25rem;
}
/* 12.5rem (9 boxes), 16 (7), 18 (6), 20 (5), 25 (4), 33rem (3), 40rem (2) all work */
/* */
.gridCols9 { grid-template-columns: repeat(auto-fit,minmax(12.5rem, 1fr)); }
.gridCols7 { grid-template-columns: repeat(auto-fit,minmax(16rem, 1fr)); }
.gridCols6 { grid-template-columns: repeat(auto-fit,minmax(18rem, 1fr)); }
.gridCols5 { grid-template-columns: repeat(auto-fit,minmax(20rem, 1fr)); }
.gridCols4 { grid-template-columns: repeat(auto-fit,minmax(25rem, 1fr)); }
.gridCols3 { grid-template-columns: repeat(auto-fit,minmax(33rem, 1fr)); }
.gridCols2 { grid-template-columns: repeat(auto-fit,minmax(40rem, 1fr)); }
/* */
main > fieldset { border: 1px solid black; }
.fontInfo {
white-space: pre-wrap;
font-family: monospace;
}
h3 {
background-color: lightgreen; text-align: center;
font-size: 1.2rem; cursor: pointer;
margin: 0; padding: 0;
}
article { margin-top: 0; display: block; }
/* Following from: https://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line */
/* Comment out following for entirely different display */
dl.singleLines {
display: grid;
grid-template-columns: max-content auto;
}
dl.singleLines>dt { grid-column-start: 1; }
dl.singleLines>dd { grid-column-start: 2; }
<main class="gridCols4">
<fieldset>
<legend> Normal </legend>
<article>
<h3>DL/DT/DD Display</h3>
</article>
<dl>
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>
</fieldset>
<fieldset>
<legend> Modified </legend>
<article>
<h3>DL/DT/DD Display</h3>
</article>
<dl class="singleLines">
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>
</fieldset>
</main>
I created a new Angular 5.2 project using the CLI (e.g. ng new MyApp)
Changing to the folder and running the app works fine. (e.g ng serve)
I made the following changes to the generated code (see below). There are only HTML and CSS code changes, very minor, what I posted is the entirety of the changes.
When I save the code it recompiles, and a warning is thrown:
ErrorEmittedError: (Emitted value instead of an instance of Error)
autoprefixer: D:\MyApp\src\app\app.component.css:51:7: Can not find
grid areas: header, nav, content, sidebar, ad, footer
The error seems to be related to the media query section of the CSS. If I remove that section the error goes away.
I don't remember this happening in Angular 4.x? Any ideas what's going on?
app.component.html
<div class="wrapper">
<header class="main-head">The header</header>
<nav class="main-nav">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</nav>
<article class="content">
<h1>Main article area</h1>
<p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p>
</article>
<aside class="side">Sidebar</aside>
<div class="ad">Advertising</div>
<footer class="main-footer">The footer</footer>
</div>
app.compnent.css
.main-head {
grid-area: header;
}
.content {
grid-area: content;
}
.main-nav {
grid-area: nav;
}
.side {
grid-area: sidebar;
}
.ad {
grid-area: ad;
}
.main-footer {
grid-area: footer;
}
.wrapper {
display: grid;
grid-gap: 20px;
grid-template-areas:
"header"
"nav"
"content"
"sidebar"
"ad"
"footer";
}
#media (min-width: 700px) {
.wrapper {
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas:
"header header header"
"nav content sidebar"
"nav content ad"
"footer footer footer"
}
nav ul {
flex-direction: column;
}
}
I am having a similar problem and the solution I have found so far isn't a great one since it duplicates code, but it may help you.
First I realize that the error is just a warning and the code complies without a problem however it is worrisome so I added the classes that I defined outside of the #media within the curly braces so with your code it would look something like this:
.main-head {
grid-area: header;
}
.content {
grid-area: content;
}
.main-nav {
grid-area: nav;
}
.side {
grid-area: sidebar;
}
.ad {
grid-area: ad;
}
.main-footer {
grid-area: footer;
}
.wrapper {
display: grid;
grid-gap: 20px;
grid-template-areas:
"header"
"nav"
"content"
"sidebar"
"ad"
"footer";
}
#media (min-width: 700px) {
.wrapper {
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas:
"header header header"
"nav content sidebar"
"nav content ad"
"footer footer footer"
}
nav ul {
flex-direction: column;
}
.main-head {
grid-area: header;
}
.content {
grid-area: content;
}
.main-nav {
grid-area: nav;
}
.side {
grid-area: sidebar;
}
.ad {
grid-area: ad;
}
.main-footer {
grid-area: footer;
}
}
Again I don't like this solution but it gets rid of the error.
If you're using Sass, to not repeat yourself as much, create a partial (_grid-areas.scss) with a mixin:
#mixin grid-areas {
body {
.leftbar { grid-area: leftbar; }
.rightbar { grid-area: rightbar; }
.main { grid-area: main;
header { grid-area: header; }
#content {grid-area: content; }
}
}
}
Then import it as needed:
#import 'grid-areas';
#media screen and (max-width: 80em) {
#include grid-areas;
}
Clears my errors in CLI 1.7.2
This warning occurred while using named grid-areas in Sass.
According to the CSS Tricks article posted by iwis, the issue is due to a conflict with Autoprefixer and the IE browser's support for the grid property.
To resolve the warning from Sass I simply replaced the property grid-template-areas: with the propertygrid-template:.
This is kinda trickt to explain, but I got a nested grid, the grid inside the grid looks lite this:
.footer {
grid-area: footer;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.bottomdiv {
grid-column-start: 1;
grid-column-end: 2;
text-align: center;
}
.leftdiv {
background-image: url("../images/logo-sbbq4.png");
opacity : 0.2;
background-repeat: no-repeat;
background-size: 20% 100%;
background-position: -60px 0px;
}
.contactlogo {
font-family: Neucha;
font-size: 4vw;
color: #000;
margin: 30% 4vw;
}
I got two problems, first one is probably easy, as you can see I want the bottomdiv to span across the 4 by 4 grid bottom.
The real problem I got is the leftdiv.
I have a backgroud image the I want to place a text above.
The image is placed and all is well but when I try to add the text the margin affects the image - I have placed it under due to CSS Cascadig nature but the didnt help.
The html looks like this:
<div class="footer" id="kontakt">
<div class="leftdiv contactlogo">
My BBQclass
</div>
<div class="rightdiv contacttext">
<ul>
<li>Telefon: 245213654</li>
<li>E-post: me#inter.net</li>
<li>Postgiro: 784512-22</li>
</ul>
</div>
<div class="bottomdiv ustext">Event, butiksevent, personalfester, fester och grillkurser. Kan även göra restaurang-gästspel med burgarna på begäran.</div>
</div>
So here is my noobish problem... wanting your excellent help.
I have a list of items of unknown length (from a CMS). I want to display them in 2 vertical columns reading down. e.g.
1 4
2 5
3 6
etc...
I am trying to achieve this with CSS grid, however, it doesn't seem possible unless you set the number of rows up front. I have tried grid-auto-flow: column as per https://gridbyexample.com/examples/example18/ but this just adds additional columns when it gets to the end.
I feel like this should be possible with grid, but I can't find a way. Anyone have any ideas?
P.S. Please don't suggest CSS text columns.
Without knowing the exact amount of items this is not possible with CSS grid alone.
The only way to get around this limitation is to add a class to your second half of the items.
body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: row dense;
/* extra styles */
grid-gap: 0.5rem;
}
span {
grid-column-start: 1;
/* extra styles */
background-color: #def;
padding: 0.5rem;
}
.second-half {
grid-column-start: 2;
/* extra styles */
background-color: #abc;
}
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span class="second-half">5</span>
<span class="second-half">6</span>
<span class="second-half">7</span>
Example:
// This is just to simulate infinite scrolling
var counter = 9;
document.addEventListener('scroll', function(e) {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
var span = document.createElement('span');
span.innerHTML = ++counter;
document.body.appendChild(span);
}
})
body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 200px;
/* how much height must each element occupy! change that! */
grid-gap: 0.5rem;
}
span {
background: #3A3A3A;
text-align: center;
color: #FFFFFF;
line-height: 200px;
font-size: xx-large;
}
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
One solution if your HTML is generated you can calculate the grid-template-rows property on the container element with Math.ceil( NUM_ITEMS / NUM_COLUMNS )
In React:
function VerticalColumns(props) {
// props.numColumns matches `grid-template-columns` on `.container` element
const numRows = Math.ceil(props.items.length / props.numColumns);
const style = {
gridTemplateRows: `repeat(${numRows}, 1fr)`,
};
return (
<ul className='container' style={ style }>
{ props.items.map((item, index) => (
<li key={index}>{ item }</li>
)) }
</ul>
)
}
Base CSS:
.container {
display: grid;
grid-auto-flow: column;
grid-template-columns: repeat(2, 1fr);
}
You can use a flex in which there is a container and a flex item. You can limit the height of the container and then wrap the contents of flex to continue in the next column :-
<body>
<div class="container">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
</body>
CSS:
.container {
height: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
Read more about flexbox