Utilizing CSS grid to center one specific div, while aligning the remaining divs on the subsequent line

I need to create a pyramid structure within a parent div utilizing 4 child divs. The first child should be centered, with the remaining children positioned below in a second row.

<style>
.parent {
   width: 100%;
   display: grid;
   grid-template-columns: repeat: (3, 1fr)
}
</style>
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
</div>

The desired outcome is a pyramid layout as shown here: http://prntscr.com/orr41c

htmlcsscss-grid

Answer №1

My Solution:

/* Define the styling for grid layout */

.parent .child:nth-of-type(1) {
    grid-column: 2/ span 1;
    grid-row: 1;
    background: red;
}

/* Arrange the remaining children in the second row */

.parent .child:nth-of-type(n+2) {
    grid-row: 2;
}


<style>
.parent {
    width: 150px;
    height: 100px;
    display: grid;
    grid-template-columns: repeat: (3, 1fr);
    margin: 0 auto;
}

.parent .child {
    background: yellow;
    width: 100%;
    height: 100%;
}

.parent .child:nth-of-type(1) {
    grid-column: 2/ span 1;
    grid-row: 1;
    background: red;
}

.parent .child:nth-of-type(n+2) {
    grid-row: 2;
}
</style>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>

Answer №2

Take a look at the code snippet below. I hope this meets your expectations:

<!DOCTYPE html>
<html lang="en>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .parent {
            width: 100%;
            display: grid;
        }

        .child {
            display: table-cell;
            text-align: center;
        }

        .innerTable {
            display: table;
            width: 100%;
        }

        .center {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="row center">
            <div>1</div>
        </div>
        <div class="row">
            <div class="innerTable">
                <div class="child">2</div>
                <div class="child">3</div>
                <div class="child">4</div>
            </div>
        </div>
    </div>
</body>

</html>

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

Lighthouse Issue: Facing PWA Challenges with a "Request Blocked by DevTools" Error

For hours now, I've been struggling to make Lighthouse work in Chrome for my initial PWA project. I feel completely lost as nothing seems to be making sense despite the basic code I have included below. The issue arises when I load the page normally ...

javascripthtmlgoogle-chromeprogressive-web-appslighthouse

Switching Tabs When a Button is Clicked

I am currently using a guide from the link provided to learn how to create tabs: http://www.w3schools.com/howto/howto_js_tabs.asp. function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClass ...

javascripthtml

Recreating a <select> element and verifying it once more using JS/HTML5

Before I delve into my issue, I would like to offer an apology for any errors in my English. So, the HTML code I am working with looks like this: <body> <div id="container"> <div id="taskList"> <div id="firstTask"> & ...

javascriptangularjshtmldrop-down-menu

Tips for utilizing flexbox to position a button to the right of an InputSelect

Struggling to position a button next to a dropdown? No matter what I attempt, the button keeps ending up above the dropdown. Ideally, I'd like it to appear alongside 'Select Organisation' as shown in the image below: https://i.sstatic.net/w ...

c#css.netflexboxblazor

What's the significance of the #/ symbol in a URL?

Currently, I am developing Ruby on Rails web applications. The URL of my webpage appears as follows: http://dev.ibiza.jp:3000/facebook/report?advertiser_id=2102#/dashboard From this link, I have identified that the advertiser_id is 2102 but I am unsure a ...

htmlruby-on-railsangularjswebfragment-identifier

Looking for a smart way to extract all the selected elements from a form?

I am attempting to retrieve all the checked items from this form using JavaScript. I have looked at previous solutions, but none of them fit my requirements. <form id="checkform" class="container" style="margin-top:20px;"> <input type="checkb ...

javascriptjqueryhtml

Elevation Ratio

Is there a way to make the height of the textarea in my demo always be 50% of the frame's height, even when resizing the frame? Currently, the textarea's height does not adjust dynamically. How can I achieve this? html, body { line-heigh ...

htmlcss

Experience the magic of CSS Sprite once it's been successfully uploaded!

Visit the website for testing here Located at the bottom of the page are two images with hover effects - one labeled "Contact us" and the other "Jobs Available!" During local testing, these images are visible. However, once uploaded to a server, they dis ...

htmlcssftpcss-sprites

Chart: Observing the Discrepancy in the Initial X-Axis Points

I'm working on incorporating multiple charts onto one page, with each chart centered and stacked one after the other. I've set a fixed width for the graph canvas. The challenge arises from the varying ranges of tick values - one chart may have a ...

javascriptcssflot

Fade in and fade out elements with jQuery using opacity in Internet Explorer

I have encountered an unusual issue in Internet Explorer involving a CSS Overlay used for a lightbox. The problem arises when I apply the fadein and fadeout effects using jQuery - everything seems to work smoothly except in IE. Instead of displaying a smo ...

jqueryhtmlcssinternet-exploreropacity

Boundaries on Maps: A guide to verifying addresses within a boundary

User provides address on the website. If the address falls within the defined boundary, it is marked as "Eligible". If outside the boundary, labeled as "Ineligible". Are there any existing widgets or code snippets available to achieve this functio ...

javascriptcssdictionarykmlboundary

Refreshing the webpage section without requiring a full page reload

I am currently working on a Django website and I have been trying to update a specific section of the webpage without refreshing the entire page. However, most solutions I found online didn't work for me because the part I want to update is actually i ...

javascriptjqueryhtmlajaxdjango

What is causing my Fabric.js canvas to malfunction?

Here is the link to my JSFiddle project: http://jsfiddle.net/UTf87/ I am facing an issue where the rectangle I intended to display on my canvas is not showing up. Can anyone help me figure out why? HTML: <div id="CanvasContainer"> <canvas id ...

javascriptjquerycsscanvasfabricjs

JavaScript is failing to match the float and string values

Trying out this code snippet: if(total === balance) { alert("test passed"); } else { alert("test failed"); } In this scenario, total = 10; and balance = 10.00;, yet the output is "test failed". ...

javascripthtmlfloating-pointinteger

The name 'SafeUrl' cannot be located

I'm working on resolving the unsafe warning in the console by using the bypassSecurityTrustUrl method, but unfortunately, I keep encountering an error. user.component.ts import {Component,OnInit} from '@angular/core'; import { DomSanitizer ...

javascripthtmlangularionic2

Implementing a Dynamic Navigation Feature using PHP in a Standalone File

I am currently working on creating a dynamic PHP navigation system that should highlight the active tab, but I'm facing challenges with making the active tab part function properly. While there are simpler methods available, they all involve incorpora ...

phphtmlcss

List layout enhancement provided by Bootstrap

I'm facing an issue with the layout of a feature list content box. While it looks good on desktop, there are problems in smaller versions like tablet and mobile devices. The four words with icons are breaking and I believe this might not be the best s ...

htmlcssbootstrap-4

Creating a modal form with jQuery in ASP.NET

I'm fairly new to ASP.NET development and have been able to work on simple tasks so far. However, I now have a more complex requirement that I'm struggling with. My goal is to create a modal form that pops up when a button is clicked in order to ...

javascriptjqueryasp.nethtml

What is the best method to make an email address distinct?

<body> <p>Please input your email address:</p> <input id="email" style="margin-bottom: 20px; margin-top: 2px;" type="email" placeholder="Email Address"> <input onclick= "validateEmail(email)" type="su ...

javascripthtmlfunctionhtml-emailindexof

Firefox experiencing glitchy rotation in CSS animations

I attempted to create a rotating div using a simple code snippet: <!DOCTYPE html> <html> <head> <style> .spinner { width: 100px; height: 100px; margin: auto; border-radius: 50%; border-bottom: 1px solid #f00; animation ...

htmlcss