I am having difficulty organizing my text into two grid columns and aligning it in the center

.hero {
  display: grid;
  grid-template-columns: repeat(2, 33.45rem);
  grid-template-rows: 12.5rem;
  border-bottom: .05em solid #05d31f;
  width: 69.8rem;
  height: 16.5rem;

}

.hero-title {
  grid-row-start: 1;
  grid-column-start: 1;
}

.hero-title h2 {
  margin: 0;
  line-height: 0.2rem;
  letter-spacing: 0.3rem;
}

.hero-text {
  grid-row: 1;
  grid-column-start: 1;
  grid-column: span 2;
  align-items: center;
}

.hero-text p {
  font-size: .7rem;
  line-height: 1.5rem;
  letter-spacing: 0.2rem;
}
<div className="hero">
      <div className="hero-title">
          <h2>FrontEnd Development with CLASS</h2>
      </div>
      <div className="hero-text">
          <p>
          I am a Front End Web developer with a passion for 
          building scalable, maintainable, and accessible 
          web applications. I have a strong background in
          HTML, CSS, Javascript, and REACT. I am always looking
          for new challenges and
          opportunities to grow and learn.
          </p>
      </div>
</div>

I am attempting to center the text within my grid columns, but struggling with making it span both columns. Do I need to use positioning? I've experimented with options like align-items: width: 100% and specifying width and height.

htmlcssreactjs

Answer №1

Consider adopting this strategy:

.hero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  border-bottom: 0.05em solid #05d31f;
  width: 70%;
  margin: auto;
  padding: 1rem;
}
.hero-title,
.hero-text {
  text-align: left;
}
.hero-title h2 {
  margin: 0;
  line-height: 1.5rem;
  letter-spacing: 0.1rem;
}
.hero-text p {
  font-size: 0.9rem;
  line-height: 1.5rem;
  letter-spacing: 0.1rem;
}
<div class="hero">
  <div class="hero-title">
    <h2>FrontEnd Development with CLASS</h2>
  </div>
  <div class="hero-text">
    <p>
      I am a Front End Web developer with a passion for 
      building scalable, maintainable, and accessible 
      web applications. I have a strong background in
      HTML, CSS, Javascript, and REACT. I am always looking
      for new challenges and opportunities to grow and learn.
    </p>
  </div>
</div>

Upon reviewing your situation once more, the following statement caught my attention (was not very clear to me):

I am trying to display the text in the middle of my grid columns; but I can't get it span both columns; do I need to use positioning ?

.hero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  border-bottom: 0.05em solid #05d31f;
  width: 70%;
  margin: auto;
  padding: 1rem;
}

.hero-title,
.hero-text, {
  text-align: left;
}

.centered-text {
  text-align: center;
  color: #05d31f;
}

.hero-title h2 {
  margin: 0;
  line-height: 1.5rem;
  letter-spacing: 0.1rem;
}

.hero-text p {
  font-size: 0.9rem;
  line-height: 1.5rem;
  letter-spacing: 0.1rem;
}

.centered-text {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="hero">
  <div class="centered-text" span-columns>
    <p>
      I am trying to display the text in the middle of my grid columns;
      but I can't get it to span both columns; do I need to use positioning? 
      I have tried using align-items: width 100% and also making it a certain width and height.
    </p>
  </div>
  <div class="hero-title">
    <h2>FrontEnd Development with CLASS</h2>
  </div>
  <div class="hero-text">
    <p>
      I am a Front End Web developer with a passion for 
      building scalable, maintainable, and accessible 
      web applications. I have a strong background in
      HTML, CSS, Javascript, and REACT. I am always looking
      for new challenges and opportunities to grow and learn.
    </p>
  </div>
</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

Eliminate the header top margin in Bootstrap

HTML <div class="container-fluid"> <div class="row"> <div class="page-header header_site"> <h1><font>ABC Company</font></h1> </div> </div> </div> CSS Code: .header_site { b ...

htmlcsstwitter-bootstrap-3

Creating a fixed sidebar in Bootstrap 3 that spans the full width of the column

I'm working with two columns - col-md-8 and col-md-4. In the second column, I have a fixed sidebar that I want to be 100% width of the col-md-4 column. The black box in the image below represents the second column. Despite trying setting the width to ...

htmlcsstwitter-bootstrap

What is the best way to adjust the volume vertically?

I successfully transformed my volume slider from horizontal to vertical using CSS. However, the functionality of the volume slider still behaves as if it were horizontal. In other words, I have to click horizontally to adjust the volume instead of vertical ...

jqueryhtmlcss

The latest React 0.60.4 update causes an Android build failure with the error message "symbol not found"

Just made the switch to React <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89c7e8fde0ffecc9b9a7bfb9a7bd">[email protected]</a>. Everything's running smoothly on iOS and xcode after updating, but I hit a sn ...

androidreactjsreact-nativegradle

Identifying identical web elements using Python Selenium through related attributes

Having attempted to solve this problem for the third time, I find myself unable to come to a final solution on my own. I would greatly appreciate it if someone could offer their insights on the issue at hand. Let's consider the following HTML structu ...

pythonhtmlpython-3.xseleniumxpath

What is the best way to add additional buttons to my React App after the initial button has been clicked?

Currently, I am in the process of developing a CSV file loader that converts data into JSON format. The loader will consist of three buttons: 1. The first button allows me to select a file from my computer and load the CSV data for conversion to JSON. 2. ...

javascriptjsonreactjsapi

The functionality of displaying and hiding elements in HTML using jQuery is not functioning as expected

When I implemented the .toggle() functionality in jQuery on the content, I encountered a problem where clicking on the "read more" button caused the text link to disappear and the first paragraph to become invisible. Below is the jQuery code snippet: $( ...

jqueryhtml

What is the best way to align the navigation bar to the left using bootstrap?

I'm having trouble creating a navigation bar for my website using bootstrap 5. I tried to move the bar to the left by adding the class margin left auto (ml-auto), but it didn't work as expected. Can someone help me figure out why? Thank you in ad ...

htmlcssbootstrap-5navigationbar

Drop effect added to useGesture drag functionality

In my project, I am utilizing react-use-gesture to enable dragging a div horizontally along the x-axis. The implementation is straightforward - it saves the movement value 'x' and utilizes it to adjust the 'left' CSS property of the div ...

reactjsgesturereact-use-gesture

React's CloneElement method now returns an object instead of a function

I'm struggling to wrap my head around the behavior of the React.cloneElement() function. This is what my Component Structure looks like: A.js export default class A extends React.Component { render() { return (<h1>{ this.props.m ...

reactjscomponentscloneelement

The canvas map has an unseen boundary on the right, causing all other div sections to be

When I set the width of my google map canvas to 80%, the map itself fills that percentage but leaves a wide space to the right of the canvas, taking up the remaining 20% of the screen. This creates an issue because my div cannot be placed in that space. ...

htmlcsscanvasmaps

Creating a Vertical Stack of Three Divs in ReactJS

Just Getting Started: As a newcomer to ReactJS and web development in general, I've put effort into researching my question without success. I acknowledge that the solution might be simpler than I think, so I apologize in advance if it turns out to b ...

htmlcssreactjsmaterial-ui

Showing Stationary Pictures at Full Size in OpenLayers

I am trying to showcase static images as maps using a StaticImage layer in ol3, with the image size set at 100% in pixels. However, I am facing difficulty in ensuring that the displayed images are always the correct size based on the extent and zoom variab ...

javascriptcssimageopenlayers-3

Ways to halt a script entirely once its tag has been eliminated

I have a script from a page tracker website that runs periodically. Occasionally I need to restart the script from the beginning. To do this, I typically remove the script tag from the DOM and then re-append it. However, because the script utilizes setInt ...

javascripthtmlreactjs

The carousel functionality in Firefox and Opera is currently experiencing issues and is not functioning properly

I have implemented a horizontal carousel at the bottom of my website www.woody.my. The carousel functions properly in Chrome, but is not visible in Firefox, Opera, and IE. Here is how it appears in Chrome: And this is how it looks in Firefox: ...

htmlcssgoogle-chromefirefoxopera

In the world of Angular, whitespace is simply treated as non-existent when it comes

Within the controller, I have an array structured as follows: 'Pipe': '|', 'Comma': ',', 'Tab': '\t' }; When configuring ng-options in my code, it is implemented in this manne ...

javascripthtmlangularjsng-options

Failure of Styling Inheritance in Angular 2 Child Components from Parent Components

My Parent Component utilizes a Child Component. I have defined the necessary styles in the Parent CSS file, and these styles change appropriately when hovering over the div. However, the Child Component does not inherit the styling classes of the Parent Co ...

htmlcssangulartypescriptangular2-template

Sending Javascript Variable through Form

I'm a newcomer to JavaScript and struggling to solve a particular issue in my script. I need help passing the variable "outVal" to a PHP script when the submit form is clicked. The value of "outVal" should come from the "output" value in the script. I ...

javascripthtmlforms

Displaying a group of elements in ReactJS

I'm currently working on assembling an array using different JSX components. There's a function I've created that populates this array with components and then returns it. let components = []; switch (obj.type) { case 'title': ...

javascriptreactjsmaterial-ui

Image renders only on a single page in Express.js

I am facing an issue while attempting to display an image on multiple pages using Pug and Express. The image should be visible on the routes '/', 'data', and 'update'. While it is successfully displayed on the root '/&ap ...

javascripthtmlimageexpresspug