What is the best way to center align all elements using a wrapper in CSS grid?

I am working on designing a layout that looks like this:

https://i.sstatic.net/jAaXL.jpg

I have set the wrapper as a class and aim to center everything on the screen.

Aside from the wrapper, I also want to make the text and form equal sizes.

Here is the current CSS I have:

.wrapper {
  display: grid;
  grid-gap: 20px;
  border: 1px solid red;
}

.navbar {
  display: grid;
}

a#logo {
  width: 212px;
  height: 41px;
}

.hero {
  display: grid;
  grid-template-areas: "hero-text hero-video";
}

.hero-text {
  grid-area: hero-text;
  border: 1px solid green;
}

.hero-form {
  grid-area: hero-video;
    border: 1px solid green;
}

If you have any suggestions on how I can quickly achieve the layout below, please let me know. You can view my code here: https://jsfiddle.net/f14qxLf5/1/

Feel free to make any modifications. Still learning here!

htmlcsscss-grid

Answer №1

Simple method using CSS Grid. You can find a helpful tutorial on CSS Grid by Rachel Andrew.

Thank you!

body {
  background-color: #fff;
}

.wrapper {
  display: grid;
  grid-gap: 20px;
  border: 1px solid red;
  padding: 20px;
}

.navbar {
  display: grid;
  text-align: center;
  width: 100%;
}

a#logo {
  display: inline-block;
  width: 212px;
  height: 41px;
  border: 1px solid gray;
  color: #000;
  font-size: 22px;
  text-decoration: none;
}

.hero {
  display: grid;
  grid-gap: 5px;
  grid-template-areas: "hero-text hero-video";
}

.title {
  text-align: center;
  border: 1px solid gray;
}

.student-list {
  display: grid;
  grid-template-areas: "student-info student-info student-info";
  grid-gap: 5px;
}

.student-info {
  text-align: center;
  justify-content: center;
  border: 1px solid gray;
  min-height: 80px;
}

.hero-text {
  grid-area: hero-text;
  border: 1px solid green;
  padding: 20px;
}

.hero-form {
  grid-area: hero-video;
  border: 1px solid green;
  padding: 20px;
}

footer {
  border: 1px solid gray;
  text-align: center;
}
<div class="wrapper">
  <div class="navbar">
    <a href="#" id="logo">LOGO</a>
  </div>

  <header class="hero">
    <div class="hero-text">
      <h2> How to make money online </h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>

    <div class="hero-form">
      <h2> TEXT FORM FOR NOW</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
  </header>
  <div class="title">
    <h2>Some Heading</h2>
  </div>


  <section class="student-list">


    <div class="student-info">
      <h2>Student Name</h2>
      <p>text</p>
    </div>

    <div class="student-info">
      <h2>Student Name</h2>
      <p>text</p>
    </div>

    <div class="student-info">
      <h2>Student Name</h2>
      <p>text</p>
    </div>

  </section>

  <footer>
    <p>footer text</p>
  </footer>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display scrollable content at the bottom

I am currently working on creating a chat application using JavaScript (AngularJS without jQuery) and I am wondering if it is possible to have a scrollable div load to the bottom automatically. While I am familiar with the scrollTo JS property, I do not f ...

javascripthtmlcssangularjs

The Bootstrap 4 grid appears to be malfunctioning as the columns are not displaying next to each other as expected

I've implemented the code below in an attempt to achieve the desired layout shown in the image, but instead, I'm getting a different outcome. Can someone help me figure out what I might be doing wrong with the Boostrap 4 grid system? I'm co ...

cssbootstrap-4

Is it possible to automatically move text to the next line once it reaches a specific character limit using HTML/CSS/PHP?

Is there a way to handle text when it reaches the ceiling or exceeds a certain number of characters so that it goes to the next line instead of showing a scrollbar? I have a div element where I display text retrieved from a MySQL database, and sometimes th ...

phphtmlcsstext

"Learn the technique of animating SVG paths with JavaScript, a step beyond traditional HTML filling

I am looking to animate SVG path elements with JavaScript instead of HTML. I have come across numerous articles discussing how to achieve this through JavaScript and jQuery by manipulating the attributes. Some helpful links I found: Fill color SVG path w ...

javascriptjqueryhtmlcsssvg

What is the best way to create a horizontally scrolling row of squares in a mobile view using html and css?

Below is a screenshot that I have replicated in the code snippet. The code snippet contains a parent div with two rows mentioned: <div class="product-all-contents"> <div class="product-contents"> </div> <div class="product-contents" ...

htmlcssresponsive-designmedia-querieshorizontal-scrolling

What is the best way to make my text scroll horizontally if the container is not wide enough?

Instead of overwhelming you with code, I'll just share a link to the types of animations I've come across so far. Although these options are close to what I'm looking for, none of them are exactly right. The one that comes closest to my vis ...

htmlcssmarquee

How to Manage Empty Lines in HTML Documents within WordPress

Just recently, I launched my brand new website. Everything seems to be functioning properly except for one issue that I discovered in the HTML source code. There are 15 blank lines before "<!doctype html>", which is causing some problems with SEO and ...

phphtmlwordpresswoocommerceblank-line

Creating a form within a PHP script

After creating a form within a PHP file and using the post method to send a value to the next page, I encountered an issue where the variable was not being successfully passed on. What could be causing this problem? When looking at the code snippet provid ...

phphtmlformssessionpost

Animating content to slide into view in the same direction using CSS transitions

My goal is to smoothly slide one of two 'pages', represented as <divs>, into view with a gentle transition that allows the user to see one page sliding out while the other slides in. Eventually, this transition will be triggered from the ba ...

javascriptjquerycsscss-transitionscss-animations

What is the process for using jQuery to systematically alter the src attribute of all avatar images on Twitter.com?

Summary: I am learning JavaScript and jQuery, and wanted to write a script to replace "_normal.png" with ".png" for all "img.avatar" images on Twitter.com. I encountered an error which I will explain below. Background: Practice makes perfect, so I like to ...

javascriptjqueryhtmlimage

The Navbar is throwing a TypeError because it is unable to retrieve the property 'classList' of null

I am currently experimenting with building a navbar in HTML that has the capability to dynamically switch pages without changing links using href. The method I'm employing to achieve this involves adding a classList of is-active to the div elements wi ...

javascripthtmlfor-loop

How to target the attribute value of an image element that has a specific parent class using jQuery

I'm working with a list that looks like this: <ul> <li><div class="thumb"><img src="image-1.jpg"></div></li> <li><div class="thumb"><img src="image-2.jpg"></div></li> <l ...

jquerycss

Guide on incorporating database-sourced audio playback using buttons in PHP and HTML

Building my website with an audio player inside has been a bit challenging. I encountered an issue when trying to combine songs loaded from the database with a play button. My goal is to have the play button change when clicked and load the song from the d ...

javascriptphphtmlaudiohtml5-audio

Is there a way to shift this structure to the right without relying on the float property?

Here's the HTML and CSS I have - .font-size-add-class { background-color: #2f2f2f; color: #f9f7f1; } .font-sizes { text-align: right; display: table; margin-top: 15px; cursor: pointer; } .font-sizes > .small { font-size: 12px; } .font ...

css

Shift attention to the subsequent division after a correct radio option or text input has been submitted

I need to enhance the user experience on my form. When a user interacts with specific elements like hitting enter in a text input or clicking a radio button, I want to automatically focus on the next "formItem" division. My form structure is organized as ...

javascriptjqueryhtmlangularjsangular-material

URLs not being gathered by the web scraping tool

Currently involved in scraping data from this specific website to compile a database. Previously, I had functioning Python code available on GitHub that successfully accomplished this task. However, due to a major overhaul in the HTML structure of the site ...

pythonhtmlweb-scrapingurlbeautifulsoup

"The sliding function of the React Bootstrap carousel is malfunctioning as it goes blank just before transitioning

Here is the code snippet I am working with: Whenever the carousel transitions to the next image, the current image disappears before displaying the next one. I am using react-bootstrap version 5.1.0, but it seems like there may be an issue with the transi ...

javascriptcssreactjscarouselreact-bootstrap

What is the best way to set up the correct pathway for displaying the image?

I'm currently facing a challenge with displaying an image from my repository. The component's framework is stored in one library, while I'm attempting to render it in a separate repository. However, I am struggling to determine the correct p ...

javascriptcssreactjsmaterial-ui

Tips for getting my navigation bar menu button functioning properly?

I am struggling to make my button show the menu when clicked. I have tried various methods but still can't pinpoint the issue. I utilized the "checkbox" trick to display the hamburger button when the site width is under 500px for a responsive menu, ye ...

htmlcss

What is the best way to ensure that a PDF document automatically opens when a webpage is visited?

I am fairly new to this, so please be patient with me. What I am attempting to achieve is the automatic opening of a PDF document as soon as a webpage is loaded. Both the webpage and the PDF document(s) will be stored locally. We are working with an exter ...

androidioslocalhosthtml