Database entries displayed using a CSS grid

Struggling to organize elements in a grid layout using CSS from my database. Despite all efforts, the items keep aligning to the left instead of forming a proper grid https://i.sstatic.net/5SfJZ.jpg

I've attempted various methods to grid the items, but nothing seems to work.

Here is the JavaScript code I'm using:

var html = "";
 html += "<center>";
 html += "<div id='post'><div id='post-head'>";
 html += snap.val().title;
 html += "</div> <div id='post-id'>  <p>";
 html += snap.val().post;
 html += "</p></div>";
 var pic = snap.val().image;
 if (pic != "empty") {
   html += "<div id='post-img'>";
   html += "<img src='"+pic+"' id='post-pic'>";
   html += "</div>";
   html += "<p align='right' id='snal'> By : Havoshing Admin</p>";
   html += "<br><small id='gray'>";
   html += snap.val().time1;
   html += "</small>";
 } else {
   html += "<br><small id='gray'>";
   html += snap.val().time1;
   html += "</small>";
 }
 html += "</div>";
 html += "</center><br><br><br>";
 document.getElementById("content").innerHTML += html;

Below is my attempt at styling it with CSS:

#content {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 10px;
  }

Please assist me in identifying where I may be going wrong. Your help is much appreciated!

javascripthtmlcss

Answer №1

When I encountered a similar issue with grid, I found that using (justify-content: center;) as my solution helped align the content properly. Additionally, by utilizing (grid-template-columns: 50% 50%;) you may inadvertently be dividing your content asymmetrically and causing it to shift to the left. Hopefully this insight proves useful to you :)

Hey there, it appears that your block is not centered because you are still specifying two columns within (grid-template-columns). When employing this CSS property, you essentially split your grid into separate sections. By adjusting it to something like repeat(2, 1fr), the layout will understand that you want it divided into two columns. Furthermore, when we define grid-template-columns, we are indicating the number of columns desired for our grid. For instance, setting it to 25% 25% 25% 25% would result in four equal divisions. In order to achieve a single centered column, consider the following CSS:

display: grid;
grid-template-columns: 90%;
gap: 10%;
justify-content: center;

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

Creating an HTML form that triggers a PHP script to send email upon submission via a Google Cloud Server

While running a php script to send an email upon form submission, I encountered an error message. Here are the details of the error: This XML file does not appear to have any style information associated with it. The document tree is shown below. &l ...

phphtmlwebgoogle-cloud-platformwebserver

Having difficulty creating a simple HTML menu, where one button is visible but the other is unresponsive despite having identical CSS styling

Looking to enhance my HTML skills as a beginner, I've begun building a simple website and am currently focusing on the menu. I created a "home" button (which is visually there but not functional), and then attempted to create another button next to it ...

htmlcss

Why is my filtering and sorting function failing to function properly?

I have a collection of events represented by an array of objects, where each event contains a start date and an end date. My goal is to filter out any events that have already passed based on the current time (now), and then sort the remaining events in d ...

javascriptsortingreactjsfilterreact-native

Is it necessary to utilize Babel with Node.js?

I am aware that Node.js fully supports ES6 now, using version 7.2.1. Recently, I was advised by someone that the current ES6 implementation in Node.js may not be production ready and that I might need to use Babel for a more robust ES6 set-up. After visit ...

javascriptnode.jsecmascript-6babeljs

Utilizing Angular JS to Manage Controller Events

I am currently working on an application that requires saving a large amount of data in cascade, similar to a typical master-detail view. Within this view, there is a "Save All" Button which saves each row in an iteration. This process triggers jQuery cus ...

javascriptjqueryangularjsjquery-events

Tips for applying custom gradient colors and styles to React Native's LinearGradient component

"react-native-linear-gradient" - tips on passing colors and styles as props interface Props { // gradientColors:string[] gradientColors:Array<string> } const BaseButton: React.FC<Props> = ({ gradientStyle ,gradientColors} ...

javascriptreactjstypescriptreact-nativetypeerror

Closing Modals in ReactJS Hooks with Parent and Child Components

I have a scenario where I am successfully opening a Model (child Component) on Button Click from the Parent Component. However, the issue arises when trying to close the modal as it displays an error message: Uncaught TypeError: setOpen is not a functio ...

javascriptreactjs

Filter the options in the Vue Multiselect component by using the filter() method

This component and API can be found at https://github.com/vueform/multiselect Event Attributes Description @search-change query, select$ Emitted after a character is typed. I am trying to access select$.filteredOptions methods: { inputQuery( ...

javascriptvue.jsvue-multiselect

Tips for aligning a form in the middle using Bootstrap 4.1

Hi, I'm new to the world of Front End development and I have a question about centering a form. I tried using the 'mx-auto' class in Bootstrap 4.1.0 documentation, but it didn't work as expected. My lead informed me that this isn&apos ...

htmlbootstrap-4

Using a MySQL statement within a conditional statement

Looking to modify this code to display different information based on the values retrieved, here is the current code: $sql_doublecheck = mysql_query("SELECT * FROM adminpage WHERE setting='main' AND close_site='1'"); $doublecheck = mys ...

phphtmlmysql

Determine in React whether all values in an array of objects are false and then return true

Is there a way to determine if all objects in an array are false in React? Below is the structure of my array: [{"filter":"ASIA","key":0,"isChecked":false},{"filter":"INDIA","key":1,"isChecked":false},{"filter":"MANDYA","key":2,"isChecked":false},{"filter ...

javascriptreactjsarrays

Unique 512-character string generated with Node.js

Is it possible to create a string of 512 characters in length that is truly unique? Can the nodejs built-in crypto module be used for this purpose to minimize collisions? Do you think the following sample code can achieve this goal? crypto.randomBytes(51 ...

javascriptnode.js

When accessed, req.params may return undefined, though it actually returns :itemId as a string, making it seem like it is undefined instead of the expected id value

For the past few days, I've been struggling to figure out what's wrong with my code and have hit a dead end in finding a solution. I've attempted various methods such as querying for the id (moving controllers to shop routes and replacing & ...

javascriptnode.jsreactjs

Developing a modification function using jQuery looping

In my quest to enhance a form I've developed, I aim to incorporate preferences. To achieve this, I have constructed an array of objects with specific fields as shown below: var userPreferences =[{ base_field:"field1", base_value:"1", preferen ...

javascriptjqueryarraysobjectforeach

Using jQuery to dynamically load content from a link using Ajax

How can I modify a link element with an href link to a page to use Ajax to load that content from the href URL without redirecting the user to that page? I want to inject the content into the current page. <a class="bind-jquery-event-here-class" href=" ...

javascriptjqueryajax

Utilize a jQuery class selector to retrieve the value of a textbox through HTMLHelper

How can I retrieve the value of "StudentID" in a JavaScript function using jQuery? HTML: <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<Student.Models.vwStudent>>" %> <div class="divClass"> ...

javascriptjqueryasp.net-mvcpartial-viewshtml-helper

If the JSON file exists, load it and add new data without recreating the file or overwriting existing data

Currently, I am in the process of developing a function called createOrLoadJSON(). This function is responsible for checking whether an existing JSON file exists within the application. If the file does not exist, it should create a new file named "userDat ...

javascriptjsonvue.jsfilesystems

Encountering the 502 Bad Gateway Error while utilizing jQuery Ajax POST in conjunction with PHP

My goal is to transfer data to a database using the method outlined below: <script> function add_new_activity(id) { var act_type = $("#add_new_activity #act_type").val(); var act_muscles = $("#add_new_activity #multi").val(); var act_l ...

javascriptphpjquerymysqlajax

Present data outside of a traditional table format

Looking to improve the layout of my page with a title, header, and 3 links. Is there a way to have them displayed next to each other with some space in between? I've tried using tables but it didn't work as they ended up too close together. Open ...

htmlcss

Error copying cell width attribute when using border collapse

Currently, I am attempting to duplicate a table header by copying the tr HTML and then replicating the th widths. Unfortunately, this method is unsuccessful as the widths are displayed as (width minus W) pixels when border: 'Wpx' and border-colla ...

javascriptjquerycss