Menu
Hello everyone,
I have a question regarding CSS grid : I’ve created a grid with some texts and images … However, if my text is too big to be inside one of my column/row, it will make it bigger and the text spread accross two lines. How do I correct that ? Is there a way to make this text overflow somehow, or separated from the grid column in order to prevent these effects ?
Also, I’ve created a container inside the body, my body has a height, and so is my container … But when I set a margin (auto auto), the top doesn’t work. I’ve read somewhere this is because of margin collapses, and I tried to rectify this by setting some padding on body or container, make it overflow, but nothing works. Do you have any idea how to correct this ?
Thank you, and have a great day.
– Frederic
<body>
<section class="pop-up">
<div class="container">
<h1>Bienvenue sur le site <strong>enuhe.fr</strong></h1>
<div class="fred">
<img src="fred.jpg" alt="Fred" class="photo">
<h2>Frédéric Ferreira</h2>
</div>
<div class="dvp">
<img src="code.png" class="png">
<h3 class="skills">Développeur Web</h3>
</div>
<div class="mind">
<img src="meditation.png" class="png">
<h3 class="skills">Praticien Mindfulness</h3>
</div>
</div>
</section>@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;400&display=swap');
*:not(strong) {
margin: 0;
padding: 0;
box-sizing: inherit;
font-weight: 200;
}
body {
height : 100vh;
background-color: white;
}
.pop-up {
display: flex;
justify-content: center;
align-items: center;
}
.container {
font-family: 'Nunito', sans-serif;
font-weight: 200;
color: white;
font-size: 20px;
height: 600px;
width: 900px;
background: linear-gradient(to top right, #e8cbc0 , #636fa4 );
border-radius: 15px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
display: grid;
justify-items: center;
align-items: center;
grid-template-columns: repeat(8, minmax(100px, 1fr));
grid-template-rows: auto;
grid-template-areas:
" . title title title title title title ."
". . . header header . . ."
". . . header header . . ."
". footer footer . . foter foter ."
". footer footer . . foter foter .";
}
.container h1 {
font-size: 40px;
grid-area: title;
}
.fred {
grid-area: header;
text-align: center;
}
.photo{
height: 160px;
width: 160px;
border-radius: 50%;
border: solid 1px white;
}
.photo:hover {
transform: scale(1.1);
transition-duration: 0.5s;
}
.fred h2 {
margin-top: 15px;
}
.dvp {
grid-area: footer;
text-align: center;
}
.mind {
grid-area: foter;
text-align: center;
}
.png {
height: 130px;
width: 130px;
padding: 5px 40px;
background-color: rgba(255, 255, 255, 0.25);
border-radius: 15px;
}
.png:hover{
background-color: rgba(255, 255, 255, 0.5);
}
.png:active {
transform: translate(5px, 3px);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
}
.skills {
color: black;
font-weight: bold;
text-transform: uppercase;
font-size: 20px;
}
.container strong:active, .skills:active {
text-decoration: underline;
color:slateblue
}
.fred img, .png, .skills, .container strong {
cursor: pointer;
}@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;400&display=swap');
*:not(strong) {
margin: 0;
padding: 0;
box-sizing: inherit;
font-weight: 200;
}
body {
height : 100vh;
background-color: white;
}
/* .pop-up {
display: flex;
justify-content: center;
align-items: center;
} */
.container {
font-family: 'Nunito', sans-serif;
margin: auto auto;
font-weight: 200;
color: white;
font-size: 20px;
height: 600px;
width: 900px;
background: linear-gradient(to top right, #e8cbc0 , #636fa4 );
border-radius: 15px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
display: grid;
justify-items: center;
align-items: center;
grid-template-columns: repeat(8, minmax(100px, 1fr));
grid-template-rows: auto;
grid-template-areas:
" . title title title title title title ."
". . . header header . . ."
". . . header header . . ."
". footer footer . . foter foter ."
". footer footer . . foter foter .";
}---></C>.<br/>
This is not really an error but I do not recommend using empty grid items for the purpose of adding spaces. Use margin or padding instead.<br/>
Modified CSS:
<CODE>`<i>
</i> @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;400&display=swap');
*:not(strong) {
margin: 0;
padding: 0;
box-sizing: inherit;
font-weight: 200;
}
html,
body {
/* ---> minimum height is 100% of viewport,
allow to expand at the bottom if content
requires this */
min-height: 100vh;
background-color: white;
}
.pop-up {
display: flex;
justify-content: center;
align-items: center;
}
.container {
font-family: 'Nunito', sans-serif;
font-weight: 200;
color: white;
font-size: 20px;
/* ---> you better allow for expanding in vertical
direction if the content requires it: */
/* height: 600px; */
/* ---> allow for shrinking the width in order
to make the layout responsive: */
max-width: 900px;
background: linear-gradient(to top right, #e8cbc0, #636fa4);
border-radius: 15px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
display: grid;
justify-items: center;
/* ---> IMO, when the height of the items differs,
it's looking nicer when they are top aligned: */
align-items: start;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
/* ---> use a minimum of template areas,
add spacing by margin or padding */
grid-template-areas:
"title title"
"header header"
"dvp mind";
}
.container h1 {
font-size: 40px;
grid-area: title;
}
.dvp,
.mind {
/* ---> here we are adding the spacing: */
margin: 2em 25% 0 25%;
}
.fred {
grid-area: header;
text-align: center;
}
.photo {
height: 160px;
width: 160px;
border-radius: 50%;
border: solid 1px white;
}
.photo:hover {
transform: scale(1.1);
transition-duration: 0.5s;
}
.fred h2 {
margin-top: 15px;
}
.dvp {
grid-area: dvp;
text-align: center;
}
.mind {
grid-area: mind;
text-align: center;
}
.png {
height: 130px;
width: 130px;
padding: 5px 40px;
background-color: rgba(255, 255, 255, 0.25);
border-radius: 15px;
}
.png:hover {
background-color: rgba(255, 255, 255, 0.5);
}
.png:active {
transform: translate(5px, 3px);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
}
.skills {
color: black;
font-weight: bold;
text-transform: uppercase;
font-size: 20px;
}
.container strong:active,
.skills:active {
text-decoration: underline;
color: slateblue
}
.fred img,
.png,
.skills,
.container strong {
cursor: pointer;
}<i>
</i>``>However, if my text is too big to be inside one of my column/row, it will make it bigger and the text spread accross two lines.
``<i>
</i><body>
<section class="pop-up">
<div class="container">
<h1>Bienvenue sur le site <strong>enuhe.fr</strong></h1>
<div class="fred">
<img src="images/01.png" alt="Fred" class="photo">
<h2>Frédéric Ferreira</h2>
</div>
<div class="dvp">
<img src="images/02.png" class="png">
<h3 class="skills">Développeur Web</h3>
</div>
<div class="mind">
<img src="images/03.png" class="png">
<h3 class="skills">Praticien Mindfulness</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</section>
</body><i>
</i>``margin-top: 2em;</C> to <C>.container`justify-content: center;</C> does the magic:
<CODE>`<i>
</i> html,
body {
/* ---> minimum height is 100% of viewport,
allow to expand at the bottom if content
requires this */
min-height: 100vh;
}
body {
background-color: white;
display: flex;
align-items: center;
justify-content: center;
}<i>
</i>``justify-content`0.1.9 — BETA 5.10