I am unable to align text in the center of the grid, both vertical and horizontally, because nothing that I tried seems to work, so I wanted to know what is the problem with my code or how should I do it.
I tried using justify-items: center, align-items: center and even place-items: center center;
This is a my full, hopefully, you can give it a try and see what is wrong with it.
<title> Learning Grid </title>
<style>
body {
color: #fff;
font-family: sans-serif;
text-align: center;
}
#content {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
max-width: 960px;
margin: 0 auto;
}
#content > * {
padding: 30px;
font-size: 30px;
}
header {
grid-column: 1/13;
text-align: center;
background-color: hotpink;
}
main {
grid-column: 4/13;
grid-row: 2/4;
background-color: darksalmon;
}
aside {
grid-column: 1/4;
grid-row: 2/3;
background-color: cadetblue;
}
nav {
grid-column: 1/4;
grid-row: 3/4;
text-align: center;
font-size: 30px;
background-color: aquamarine;
}
section {
grid-column: 1/13;
grid-row: 4/6;
background-color: coral;
}
footer {
grid-column: 1/13;
grid-row: 6/7;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="content">
<header> Header </header>
<main> Main </main>
<section>Section </section>
<aside>Aside </aside>
<nav> Nav </nav>
<footer> Footer</footer>
</div>
</body>
To align the text, you could use the line-height approach, but that is not very responsive.
Since you already have the grid layout, you can keep that same idea and add a helper element, like a <span>. Doing that, give you more options to alight the actual text.
Here is an example of how your new HTML would look like:
<main>
<span>Main</span>
</main>
And the CSS for that would be:
main {
grid-column: 4/13;
grid-row: 2/4;
background-color: darksalmon;
display: grid;
}
main > * {
margin: auto;
}
For aligning text to center just use this property: display: flex; align-items: center; justify-content: center;
body {
color: #fff;
font-family: sans-serif;
text-align: center;
}
#content {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
max-width: 960px;
margin: 0 auto;
}
#content > * {
padding: 30px;
font-size: 30px;
}
header {
grid-column: 1/13;
text-align: center;
background-color: hotpink;
}
main {
grid-column: 4/13;
grid-row: 2/4;
background-color: darksalmon;
display: flex;
align-items: center;
justify-content: center;
}
aside {
grid-column: 1/4;
grid-row: 2/3;
background-color: cadetblue;
}
nav {
grid-column: 1/4;
grid-row: 3/4;
text-align: center;
font-size: 30px;
background-color: aquamarine;
}
section {
grid-column: 1/13;
grid-row: 4/6;
background-color: coral;
display: flex;
align-items: center;
justify-content: center;
}
footer {
grid-column: 1/13;
grid-row: 6/7;
background-color: cornflowerblue;
}
<div id="content">
<header> Header </header>
<main> Main </main>
<section>Section </section>
<aside>Aside </aside>
<nav> Nav </nav>
<footer> Footer</footer>
</div>
You can use Bootstrap classes for example :
<main class="text-center justify-content-center align-items-center"> Main </main>
Or aligning text over CSS
main {
display: flex;
justify-content: center;
align-items: center;
}
Related
This might very well be the stupidest question but why is the border radius of items changing when you zoom the viewport by Ctrl + mousewheel or through browser zoom? (To test it, run the code snippet below and open it in full page, then zoom in and out) The border radius is set in pixels, so why is it changing? Also, I always have to use flex layout to center text vertically inside a container, is there a better way to vertically a text? Setting display: inline-block and vertical-align: middle is not working.
/* Normalize rules */
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
}
/* Root grid layout */
.root {
height: 100vh;
display: grid;
grid-template-columns: repeat(6, minmax(20px, 1fr));
grid-template-rows: repeat(6, minmax(20px, 1fr));
gap: 15px;
padding: 15px;
}
section.merchandise {
background-color: #aa0100;
grid-column: 1/3;
grid-row: 1;
}
header {
background-color: #000;
grid-column: 3/7;
grid-row: 1;
}
aside {
background-color: #00aa01;
grid-column: 1;
grid-row: 2/7;
}
section.products {
background-color: #0300aa;
grid-column: 2/6;
grid-row: 2/4;
}
footer {
grid-column: 2/7;
grid-row: 6;
background-color: #ffa502;
}
/* Features sub-grid */
.features {
grid-column: 6;
grid-row: 2/6;
display: grid;
gap: 15px;
grid-template-columns: minmax(20px, 1fr);
grid-template-rows: repeat(4, minmax(20px, 1fr));
}
.features>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.features>div:nth-child(2) {
grid-column: 1;
grid-row: 3;
}
/* Bonuses sub-grid */
.bonuses {
grid-column: 2/6;
grid-row: 4/6;
display: grid;
gap: 15px;
grid-template-columns: repeat(4, minmax(20px, 1fr));
grid-template-rows: repeat(2, minmax(20px, fr));
}
.bonuses>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.bonuses>div:nth-child(2) {
grid-column: 2;
grid-row: 2;
}
.bonuses>div:nth-child(3) {
grid-column: 3;
grid-row: 1;
}
.bonuses>div:nth-child(4) {
grid-column: 4;
grid-row: 2;
}
/* Visual styles */
h2,
h3 {
font-size: 1.2rem;
color: #fff;
}
div,
header,
footer,
aside,
section {
border-radius: 12px;
}
.feature-item {
background-color: #dd0101;
}
.bonus-item {
background-color: #ffc0cb;
}
.bonus-item>h3 {
color: #000;
}
.centered-text {
display: flex;
align-items: center;
justify-content: center;
}
.centered-text>h2,
.centered-text>h3 {
text-align: center;
}
<div class="root">
<section class="merchandise centered-text">
<h2>Featured Merchandising</h2>
</section>
<header class="centered-text">
<h2>Header</h2>
</header>
<aside class="centered-text">
<h2>Sidebar</h2>
</aside>
<section class="products centered-text">
<h2>Products</h2>
</section>
<div class="bonuses">
<div class="bonus-item centered-text">
<h3>Bonus1</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus2</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus3</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus4</h3>
</div>
</div>
<div class="features">
<div class="feature-item centered-text">
<h3>Feature1</h3>
</div>
<div class="feature-item centered-text">
<h3>Feature2</h3>
</div>
</div>
<footer class="centered-text">
<h2>Footer</h2>
</footer>
</div>
I think, you want only the text to be zoomed and the border radius to look the same. Therefor you could use a screen dependent value like vw or vh. For example:
div,
header,
footer,
aside,
section {
border-radius: calc(1vw + 1vh);
}
Working example:
/* Normalize rules */
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
}
/* Root grid layout */
.root {
height: 100vh;
display: grid;
grid-template-columns: repeat(6, minmax(20px, 1fr));
grid-template-rows: repeat(6, minmax(20px, 1fr));
gap: 15px;
padding: 15px;
}
section.merchandise {
background-color: #aa0100;
grid-column: 1/3;
grid-row: 1;
}
header {
background-color: #000;
grid-column: 3/7;
grid-row: 1;
}
aside {
background-color: #00aa01;
grid-column: 1;
grid-row: 2/7;
}
section.products {
background-color: #0300aa;
grid-column: 2/6;
grid-row: 2/4;
}
footer {
grid-column: 2/7;
grid-row: 6;
background-color: #ffa502;
}
/* Features sub-grid */
.features {
grid-column: 6;
grid-row: 2/6;
display: grid;
gap: 15px;
grid-template-columns: minmax(20px, 1fr);
grid-template-rows: repeat(4, minmax(20px, 1fr));
}
.features>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.features>div:nth-child(2) {
grid-column: 1;
grid-row: 3;
}
/* Bonuses sub-grid */
.bonuses {
grid-column: 2/6;
grid-row: 4/6;
display: grid;
gap: 15px;
grid-template-columns: repeat(4, minmax(20px, 1fr));
grid-template-rows: repeat(2, minmax(20px, fr));
}
.bonuses>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.bonuses>div:nth-child(2) {
grid-column: 2;
grid-row: 2;
}
.bonuses>div:nth-child(3) {
grid-column: 3;
grid-row: 1;
}
.bonuses>div:nth-child(4) {
grid-column: 4;
grid-row: 2;
}
/* Visual styles */
h2,
h3 {
font-size: 1.2rem;
color: #fff;
}
div,
header,
footer,
aside,
section {
border-radius: calc(1vw + 1vh);
}
.feature-item {
background-color: #dd0101;
}
.bonus-item {
background-color: #ffc0cb;
}
.bonus-item>h3 {
color: #000;
}
.centered-text {
display: flex;
align-items: center;
justify-content: center;
}
.centered-text>h2,
.centered-text>h3 {
text-align: center;
}
<div class="root">
<section class="merchandise centered-text">
<h2>Featured Merchandising</h2>
</section>
<header class="centered-text">
<h2>Header</h2>
</header>
<aside class="centered-text">
<h2>Sidebar</h2>
</aside>
<section class="products centered-text">
<h2>Products</h2>
</section>
<div class="bonuses">
<div class="bonus-item centered-text">
<h3>Bonus1</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus2</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus3</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus4</h3>
</div>
</div>
<div class="features">
<div class="feature-item centered-text">
<h3>Feature1</h3>
</div>
<div class="feature-item centered-text">
<h3>Feature2</h3>
</div>
</div>
<footer class="centered-text">
<h2>Footer</h2>
</footer>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
Image of overflowing button:
I have section-b-home class that has 2 buttons and I'm fairly new to CSS and I cant seem to stop the button from overflowing a section inside the grid element.
Is there any way I can fix the button inside the parent element?
Can you also please check other aspects of my code and if there are issues that needs fixing?
my CSS and HTML:
html {
font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
height: 100%;
}
body {
background: linear-gradient(90deg, rgba(193, 200, 228, 1) 18%, rgba(132, 222, 235, 1) 50%, rgba(130, 220, 235, 1) 52%, rgba(90, 185, 234, 1) 86%);
font-size: 62.5%;
height: 100vh;
box-sizing: border-box;
}
span {
font-size: 0.7rem;
}
h1 {
font-size: 1.2rem;
}
h2 {
font-size: 1.3rem;
display: block;
}
.wrapper {
background-color: #fff;
opacity: 0.5;
min-height: 100vh;
min-width: 100vw;
display: grid;
grid-template-rows: 0.65fr 9fr 1.45fr;
}
.section-wrapper-home {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
justify-content: center;
align-items: center;
}
section {
height: 100%;
width: 100%;
background: #666;
text-align: center;
}
section:nth-child(odd) {
background: #333;
}
.section-a-home {
grid-column: 1/4;
grid-row: 1/3;
}
.section-a-home span {
font-size: 7rem;
margin-top: 2rem;
color: rgba(16, 20, 24, 0.904);
}
.section-b-home {
grid-column: 4;
grid-row: 1 / 3;
}
.section-c-home {
grid-column: 5;
grid-row: 1 / 3;
}
.section-d-home {
grid-column: 6;
grid-row: 1 / 3;
}
.section-e-home {
grid-column: 1/4;
grid-row: 3;
}
.section-f-home {
grid-column: 4/7;
grid-row: 3;
}
.section-g-home {
grid-column: 1/3;
grid-row: 4;
}
.section-h-home {
grid-column: 3/5;
grid-row: 4;
}
.section-i-home {
grid-column: 5/7;
grid-row: 4;
}
.test {
height: 100%;
}
.test .btn {
width: 100%;
height: 100%;
}
.footer-wrapper {
border-top: 1px solid #555;
}
.header-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
height: 100%;
padding: 0 1em;
border-bottom: 1px solid #555;
}
.header-theme i {
padding-left: 1.5rem;
font-size: 1rem;
}
.header-date {
justify-self: flex-start;
}
.header-title {
justify-self: center;
}
.header-theme {
justify-self: end;
}
.footer-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
justify-items: center;
align-items: center;
height: 100%;
width: 100%;
}
.footer-nav button {
height: 90%;
width: 95%;
}
.fas {
font-size: 1.6rem;
}
<body>
<div class="wrapper">
<header class="header-wrapper">
<nav class="header-nav">
<div class="header-date">
<span>12-12-2021</span><br /> <span>04:05:06 AM</span>
</div>
<div class="header-title">
<h1>Room Name</h1>
</div>
<div class="header-theme">
<i class="fas fa-sun" id="theme-light"></i>
<i class="fas fa-moon" id="theme-dark"></i>
</div>
</nav>
</header>
<main class="main-wrapper">
<div class="section-wrapper-home">
<section class="section section-a-home">
<h2>Room Temperature</h2>
<span>20.05°C</span>
</section>
<section class="section section-b-home">
<h2>Climate Control</h2>
<div class="test">
<button class="btn">On</button>
<button class="btn">Off</button>
</div>
</section>
<section class="section section-c-home"></section>
<section class="section section-d-home"></section>
<section class="section section-e-home"></section>
<section class="section section-f-home"></section>
<section class="section section-g-home"></section>
<section class="section section-h-home"></section>
<section class="section section-i-home"></section>
</div>
</main>
<footer class="footer-wrapper">
<nav class="footer-nav">
<button><i class="fas fa-home" id="nav-home"></i></button>
<button><i class="fas fa-lightbulb" id="nav-light"></i></button>
<button><i class="fas fa-window-maximize" id="nav-curtain"></i></button>
<button><i class="fas fa-music" id="nav-audio"></i></button>
<button><i class="fas fa-thermometer-half" id="nav-climate"></i></button>
</nav>
</footer>
</div>
</body>
Simply, add overflow: hidden; in the test class.Example:
.section-b-home .test {
overflow: hidden;
}
I'm trying to make a layout like this:
Here's my code:
.grid{
display: grid;
background: gray;
grid-gap: 15px;
justify-content: center
align-items: center;
grid-template-columns: repeat(2, auto);
grid-auto-rows: minmax(50px, auto);
}
.sidebar{
grid-column: 1/2;
background-color: white;
align-items: center;
justify-content: center;
width: 300px;
}
.navbar{
grid-column: 2/3;
background-color: white;
height: 50px;
}
.section2{
grid-column: 2/3;
background-color: white;
height: 300px;
}
.section4{
grid-column: 2/3;
background-color: white;
height: 300px;
}
.section3{
grid-column: 1/2;
background-color: white;
height: 200px;
align-items: center;
width: 300px;
}
.section5{
grid-column: 1/2;
background-color: white;
height: 100px;
align-items: center;
width: 300px;
}
<div class="grid">
<div class="sidebar">sidebar</div>
<div class="navbar">navbar</div>
<div class="section2">section2</div>
<div class="section3">section3</div>
<div class="section4">section4</div>
<div class="section5">section5</div>
</div>
The output is shown here:
I highlighted in red some big problems, I have these massive gaps in between sections, and my columns aren't being centered in the grid I tried adding "justify-content: center" and "align-items: center" but none of those centered the sidebar sections and I have no clue how to reduce the gap in between the sections. How can I fix my code so it looks more like the layout in my mockup?
It's complicated because with CSS Grid you have a grid...
For your layout you must divide them on two sections like this:
<div class="grid">
<div class="left">
<aside class="sidebar">sidebar</aside>
<section class="section2">section2</section>
<section class="section4">section4</section>
</div>
<div class="right">
<nav class="navbar">navbar</nav>
<section class="section3">section3</section>
<section class="section5">section5</section>
</div>
</div>
https://codepen.io/tasmim-concept/pen/mdrxLOR
A specific text can't be put in the center in CSS grid.
I have a grid CSS but the text "Post Manager" seems to not go to center. I have made grid items into flex container but only this text seem to not follow the rule. Any thought is appreciated. Thank you.
body {
font-family: sans-serif;
}
.wrapper {
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(15, 1fr);
width: 100vw;
height: 100vh;
}
.gn {
background-color: #7fd2f0;
grid-row: 1 / 16;
writing-mode: vertical-lr;
text-orientation: mixed;
transform: rotateZ(180deg);
}
.ab {
background-color: #85fedd;
grid-column: 2/16;
}
.pm {
background-color: #f7f7f7;
grid-row: 2/16;
grid-column: 2/5;
text-align: center;
}
.wp {
background-color: #c6c6c6;
grid-column: 6/16;
grid-row: 2/16;
}
.center-text {
display: flex;
justify-content: center;
align-items: center;
}
<div class="wrapper">
<div class="center-text gn">Global Navigation</div>
<div class="center-text ab">Application Bar</div>
<div class="center-text pm">Post Manager</div>
<div class="center-text wp">Writing Space</div>
</div>
try this.
.pm {
grid-column: 2/6;
}
So I've been trying to put an image inside a grid but its causing me problems.
Right now, my biggest issue is that is pushing another grid item down.
body {
padding: 0;
margin: 0;
}
.main {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.main-bar {
grid-row: 1/16;
grid-column: 4/21;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.main-info {
grid-column: 1/21;
grid-row: 1/21;
background: #333;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.header-title {
grid-column: 3;
grid-row: 2/8;
background: #000;
}
.business {
grid-column: 17;
}
.side-bar {
background: #fff;
grid-row: 1/21;
grid-column: 1/4;
display: grid;
grid-template-rows: repeat(10, 1fr);
border-right: 1px solid #0F6B99;
}
.side-bar img {
width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -24px;
}
.home-button {
padding: 20px;
text-align: center;
background: #0F6B99;
grid-row: 3/4;
}
.buy-button {
padding: 20px;
text-align: center;
background: #59B3B3;
grid-row: 4/5;
}
.sell-button {
padding: 20px;
text-align: center;
background: #8FCCB8;
grid-row: 5/6;
}
.rent-button {
padding: 20px;
text-align: center;
background: #B8E6B8;
grid-row: 6/7;
}
.article1 {
background: #e6174b;
grid-row: 16/21;
grid-column: 4/11;
}
.article2 {
background: #8FCCB8;
grid-row: 16/21;
grid-column: 11/18;
}
.article3 {
background: #B8E6B8;
grid-row: 16/21;
grid-column: 18/21;
}
<div class="main">
<div class="main-bar">
<div class="main-info">
<img class="business" src="http://pngimg.com/uploads/businessman/businessman_PNG6564.png" alt="">
<div class="header-title">High Quality Realstate Asistance</div>
</div>
</div>
<div class="side-bar">
<!--<img src="img/logo.png" alt="">-->
<div class="home-button">
Home
</div>
<div class="buy-button">
Buy
</div>
<div class="sell-button">
Sell
</div>
<div class="rent-button">
Rent
</div>
</div>
<div class="article1">
</div>
<div class="article2">
</div>
<div class="article3">
</div>
</div>
The image in question has a class as business and the item is pushing down has a class as header-title. Header-title should be inside main-info, but when 'business' appears, it pushes header-title down!
!
The issue here is that your image with the business class is overflowing its own grid and the grid of its container.
In order to resolve this add the property overflow: hidden to both the .main-info class and the .business class.
These classes also need the "display: grid" property so the browser can process the grid-column and grid-row property accordingly for those two classes.
Once those additions are made you can tweak the grid-row and grid-column for the the .business class and the .header-title classes accordingly to find your desired positions.
Full CSS and HTML Below:
body {
padding: 0;
margin: 0;
}
.main {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.main-bar {
grid-row: 1/16;
grid-column: 4/21;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.main-info {
grid-column: 1/21;
grid-row: 1/21;
background: #333;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
overflow: hidden;
}
.header-title {
grid-column: 3;
grid-row: 2/8;
background: #000;
display: grid;
}
.business {
grid-column: 17;
overflow: hidden;
display: grid;
}
.side-bar {
background: #fff;
grid-row: 1/21;
grid-column: 1/4;
display: grid;
grid-template-rows: repeat(10, 1fr);
border-right: 1px solid #0F6B99;
}
.side-bar img {
width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -24px;
}
.home-button {
padding: 20px;
text-align: center;
background: #0F6B99;
grid-row: 3/4;
}
.buy-button {
padding: 20px;
text-align: center;
background: #59B3B3;
grid-row: 4/5;
}
.sell-button {
padding: 20px;
text-align: center;
background: #8FCCB8;
grid-row: 5/6;
}
.rent-button {
padding: 20px;
text-align: center;
background: #B8E6B8;
grid-row: 6/7;
}
.article1 {
background: #e6174b;
grid-row: 16/21;
grid-column: 4/11;
}
.article2 {
background: #8FCCB8;
grid-row: 16/21;
grid-column: 11/18;
}
.article3 {
background: #B8E6B8;
grid-row: 16/21;
grid-column: 18/21;
}
<div class="main">
<div class="main-bar">
<div class="main-info">
<img class="business" src="http://pngimg.com/uploads/businessman/businessman_PNG6564.png" alt="">
<div class="header-title">High Quality Realstate Asistance</div>
</div>
</div>
<div class="side-bar">
<!--<img src="img/logo.png" alt="">-->
<div class="home-button">
Home
</div>
<div class="buy-button">
Buy
</div>
<div class="sell-button">
Sell
</div>
<div class="rent-button">
Rent
</div>
</div>
<div class="article1">
</div>
<div class="article2">
</div>
<div class="article3">
</div>
</div>