"Strategically placing elements on an HTML grid

Question

"Strategically placing elements on an HTML grid

My current project involves creating a grid layout in HTML using CSS. The goal is to use this layout for various elements such as images, text, and links.

What I envision is a visually appealing grid where each object fits together seamlessly with no gaps between the 'divs', automatically adjusting based on a predefined size.

I am determined to avoid relying on APIs or libraries for this project and prefer a solution that primarily uses CSS, JavaScript, jQuery, and HTML.

You can view my progress so far at http://jsfiddle.net/AeroMcDoom/quC8V/1/.

Although I have set up a basic 1x1 grid ('.a' with red background), I am relatively new to the positioning concepts in HTML and have been grappling with this challenge for over a week now.

.a {
    width: 100px;
    height: 100px;
    float:left;
    background-color:red;
}

(Note: '.a' represents the 1x1 grid and '.b' is the 2x2 grid)

javascript jquery html css

Answer 1

Answer №1

CSS Grid is a powerful tool that has gained popularity in recent years as a pure HTML/CSS solution for creating layouts. It offers a non-hacking approach to positioning elements exactly where you want them, and it's more reliable than other methods.

If you're interested in learning more about CSS Grid, check out this framework generator:

One of the best resources for mastering CSS Grid is a tutorial series by Rachel Andrew, a respected advocate for this technology. You can watch her videos here:

For a hands-on example of CSS Grid in action, take a look at this CodePen demo: https://codepen.io/quibble/pen/NaKdMo

#wrapper{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 30px 3px 27px 13px 17px 40px; 
  grid-template-areas:
    "one two three"
    "one five three"
    "one five six"
    "four five six"
    "four five ."
    "four . .";
}
#wrapper>div{
  background-color: gray;
}
.d_1{
  grid-area: one;
}
.d_2{
  grid-area: two;
}
.d_3{
  grid-area: three;
}
.d_4{
  grid-area: four;
}
.d_5{
  grid-area: five;
}
.d_6{
  grid-area: six;
}

Answer 2

CSS Grid is a powerful tool that has gained popularity in recent years as a pure HTML/CSS solution for creating layouts. It offers a non-hacking approach to positioning elements exactly where you want them, and it's more reliable than other methods.

If you're interested in learning more about CSS Grid, check out this framework generator:

One of the best resources for mastering CSS Grid is a tutorial series by Rachel Andrew, a respected advocate for this technology. You can watch her videos here:

For a hands-on example of CSS Grid in action, take a look at this CodePen demo: https://codepen.io/quibble/pen/NaKdMo

#wrapper{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 30px 3px 27px 13px 17px 40px; 
  grid-template-areas:
    "one two three"
    "one five three"
    "one five six"
    "four five six"
    "four five ."
    "four . .";
}
#wrapper>div{
  background-color: gray;
}
.d_1{
  grid-area: one;
}
.d_2{
  grid-area: two;
}
.d_3{
  grid-area: three;
}
.d_4{
  grid-area: four;
}
.d_5{
  grid-area: five;
}
.d_6{
  grid-area: six;
}

"Strategically placing elements on an HTML grid

Answer №1

Similar questions

Utilizing Jquery.Cycle with IE7 for transitioning to the next div element

Managing the layout with React Native Flexbox to evenly distribute items

Could someone assist me in resolving the issue of receiving empty emails from my online form submission?

Is there a messaging app that provides real-time updates for when messages are posted?

Executing an Ajax request that invokes a PHP function

A single list is utilized by multiple HTML5 selects

What steps should be taken to enlarge a checkbox within a table?

How can HTML5 geolocation be utilized to provide real-time latitude and longitude coordinates for integration with the Google Maps API?

What is the correct method to define the width as a percentage while also maintaining a minimum width in pixels?

What is typically regarded as the optimal size for a full-screen background image?

How can we use the Selenium JavascriptExecutor in Java to return an Object from JavaScript?

Creating a Dynamic Navigation Bar using React and NextJS

Issue with React ChartJS rendering – Title not visibleWhen using React Chart

Using ng-repeat in Angular JS to generate forms

Managing nested Angular repeats with counter

The module cannot be located, despite my efforts to reinstall and verify all addresses, the error still persists

The anchor tag <a> is configured for inline display but is unexpectedly occupying the entire space

The use of a jQuery AJAX call results in the garbled text being sent when two or more question marks appear consecutively

How about "Temporary and localized responses with Discord.JS?"

What methods can be used to accomplish this effect using CSS and/or Javascript?