My grid layout remains unchanged despite tweaking grid-template-columns

I am currently learning HTML and CSS and experimenting with building a website. My goal is to have 4 boxes aligned next to each other, similar to a navigation bar, but with box items. Here is the code for these boxes:

HTML:

<section class="boxes">  
<div class ="box">
    <i class="fas fa-chart-pie fa-4x"></i>
    <h3>Analytics</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
    <div class ="box">
        <i class="fas fa-globe fa-4x"></i>
        <h3>Marketing</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
    </div>
    <div class ="box">
        <i class="fas fa-cog fa-4x"></i>
        <h3>Development</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
    </div>
    <div class ="box">
        <i class="fas fa-users fa-4x"></i>
        <h3>Support</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
    </div>
</div>

CSS:

.boxes{
  display:grid;
  grid-gap:20px;
  grid-template-columns:repeat(4,1fr);
}

However, I'm facing an issue where the grids are not aligning side by side and appearing vertically instead. Can anyone provide guidance on how to fix this issue?

htmlcss

Answer №1

The issue you were experiencing was due to improperly closed HTML tags. Here is the corrected code snippet:

.boxes {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}
<section class="boxes">
  <div class="box">
    <i class="fas fa-chart-pie fa-4x"></i>
    <h3>Analytics</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="box">
    <i class="fas fa-globe fa-4x"></i>
    <h3>Marketing</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </div>

  <div class="box">
    <i class="fas fa-cog fa-4x"></i>
    <h3>Development</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="box">
    <i class="fas fa-users fa-4x"></i>
    <h3>Support</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </div>
</section>

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

Is there a way to enable scrolling on a page without editing the HTML? I have a table inside a div that is overflowing, and I want the page to scroll,

I'm facing an issue with a DIV that is 600px wide and contains a table. Due to long email addresses, the wrapping isn't working properly even after using word-wrap: break-word. I've experimented with changing the width, adding !important, a ...

csshtml-tableoverflow

What is the best way to activate a scrollbar exclusively for the final section in fullpage.js?

Is there a way to enable a scrollbar for the last section only in fullpage.js? This is what I attempted: $("#section3").fullpage({ scrollBar: true, fitToSection: false, }); Unfortunately, it didn't work as expected. ...

jqueryhtmlcssfullpage.js

Navigating with Express while incorporating React

I am struggling to set up the routes for my web application using Express, as well as incorporating React for the front end. The issue lies in properly routing things when React components are involved. My index.html contains: <script> document.get ...

javascripthtmlreactjsexpress

Issue with Bootstrap carousel - the carousel.on method is not recognized

I have implemented a standard Bootstrap carousel in my project: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Avoid automatic background resizing to match the full width of the header text

I've been trying to use CSS to style my <h1> element in a specific way, but it seems the default browser behavior is getting in the way: https://i.sstatic.net/oRR5N.png Despite my efforts, the browser continues to display it like this: https: ...

htmlcss

The Chrome browser's default stylesheet is overriding the styles of my website

I'm experiencing an issue with the CSS styling on one of my website pages. Here is the CSS code for formatting links: a:link, a:visited, a:active { color: white; text-decoration: none; font-weight: bold; } However, despite these styles, ...

htmlruby-on-railscssgoogle-chromeweb

What is the best way to achieve a stylish Bootstrap modal design with a blurred and transparent header, as well as a left sidebar that seamlessly blends into

Is it feasible to create a modal with a blurred (transparent) background for the header section, allowing the site to show through? Additionally, can a sidebar on the left side of the modal also be transparent and blurred, revealing the site underneath? C ...

javascripthtmlcssbootstrap-4bootstrap-modal

How can screen readers be alerted about freshly loaded content through ajax?

Whenever a user clicks on a button, I want to add more content to the page. The new content will be visually clear, but how can I ensure that screen readers can easily access it? I've come across two best practices that suggest additional steps may b ...

htmlajaxaccessibility

Utilize PHP SVG images to trigger internal JavaScript code through the <img> tag

Here is a php function that generates an SVG image. public function actionJsTest() { header('Content-Type: image/svg+xml'); $svg = ''; $svg .= '<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/ ...

javascriptphphtmlsecuritysvg

Run a script on a specific div element exclusively

Up until this point, we have been using Iframe to load HTML and script in order to display the form to the user. Now, we are looking to transition from Iframe to DIV, but we are encountering an issue with the script. With Iframe, the loaded script is onl ...

javascripthtmliframe

Implementing a clickable image using an anchor tag in JavaScript

I need to enhance my image tag in JQuery by adding an anchor tag alongside it. How can I accomplish this using JavaScript? Here is what I attempted: var imgg = document.createElement("img"); imgg.className='myclass'; $( ".myclass" ).add( "<a ...

javascriptjqueryhtml

Refresh the NodeJS page without resending user data

I am facing an issue with my Node Js local server and multiple identical html pages. Each page contains user input fields that are saved on a text file. The problem arises when users refresh the page, as the data from the previous page is sent and saved ag ...

htmlnode.js

Customize your Bootstrap hamburger menu with a unique open and close button design

Currently, I am in the process of creating a hamburger menu with Bootstrap and I have managed to customize the open and close buttons according to my preferences. However, I am facing an issue where the hamburger icon is not displaying properly. See the c ...

htmlcsstwitter-bootstrap

Navigate to the first item on the menu in the Chrome browser

Why does the First Menu Item (.chosen) jump in Chrome Browser when refreshed? It seems like it's changing the Padding-Right and Padding-Bottom. Please review the code and help me solve this irritating issue. It works fine in Firefox. <body> ...

jqueryhtmlcss

Tips for showing the chosen value of a ModelChoiceField in Django

Is there a way to display only the selected value from a forms.ModelChoiceField on a view page? I'm struggling to find a clear solution as a Python newbie, despite searching through various forums. Here is the form code snippet: class Manufacturer1F ...

pythonhtmldjango

Converting table data to JSON using JavaScript, including rows for "parent" and "children."

To create a JSON object by selecting values from multiple rows of a table using checkboxes, follow the structure below. The parent row, identified by the class 'primary color,' will be included in the JSON, along with the selected child rows. The ...

javascripthtmljqueryjsonhtml-table

Exploring simpleML's capability to delve deeper into the depths of the page source

I've been able to successfully extract the username babesmcphee from reading this site using simpleML in processing. However, I'm facing an issue with retrieving the second username (JohnCMayer) and subsequent ones. I suspect the problem lies in ...

javahtmlprocessing

Problem with linear gradient in SVG text

I'm experimenting with adding a linear gradient to SVG text, but I'm struggling to specify the fill color in the text class. I came across an example online and decided to try it out, but when I entered the fill color for the text (in the sfp2 cl ...

csssvgcss-gradients

What is the method to activate sequential selection through JSON response?

I just started exploring angularjs and I'm interested in selecting values step by step. But first... Here's the JSON response I received: [ { "countryname": "India", "states": [ { "statename": "Karnataka", ...

htmlangularjsjson

Setting an error state on the parent div of a checkbox

I am facing an issue with styling a standard HTML checkbox when it is in an error state. Since it's not possible to style the checkbox directly, I am attempting to apply the styling to its parent div instead. Consider this example: <div class="fo ...

jquerycsscheckbox