0
132
Vistas¿Cómo colocar elementos dentro de la cuadrícula css?
Estoy aprendiendo la cuadrícula CSS y tratando de colocar los elementos dentro de la cuadrícula.
puede obtener y ver datos de javascript:
const profileImg = document.createElement('img'); var profilePhotoUrl = post.user.get("photo").url(); profileImg.src = profilePhotoUrl; profileImg.className = "profile"; const username = document.createElement('username'); username.className = "user"; username.innerText = post.name; const content = document.querySelector('.content'); content.append(profileImg, username);poniendo un CSS completo aquí:
body, html { margin: 0; height: 100%; font-family: Arial, Helvetica, sans-serif; } body { display: grid; margin: 0; grid-template-columns: 20% auto; grid-template-rows: 60px auto 100px; grid-template-areas: "header header" "sidebar content" "sidebar footer"; } header { position: sticky; grid-area: header; background-color: rgb(0, 0, 0); } aside { grid-area: sidebar; background-color: lightsteelblue; } .content { display: inline-flex; align-items: center; } footer { grid-area: footer; background-color: rgb(121, 121, 121); padding: 10px; } .user { grid-area: user; font-size: 10pt; } .profile { grid-area: profile; }HTML:
<html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css"> </head> <body> <aside> <ul> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">service</a></li> <li><a href="#">contact</a></li> </ul> </aside> <header> <h1>Diky</h1> </header> <div class="content"> </div> <footer> <p>this is my footer</p> </footer> <script src="app.js"></script> </body> </html>Y se parece a esto. ¿Cómo puedo colocarlos verticalmente? ¿Cómo puedo posicionar elementos que se crean desde javascript?
(profile username) <--like this (profile username) (profile username) 
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
En primer lugar, recomiendo no usar flexbox con grid, con el mismo propósito, ya que arruina tu comprensión de grid. De todos modos aquí está el código
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* Main grid container styling */ .grid-container{ display: grid; /* This is used for the position into 3 columns */ grid-template-columns: 1fr 1fr 1fr; /* For the margin between the three items */ grid-gap: 1rem; /* For centering of items */ justify-content: center; align-items: center; } /* For styling of grid items */ .grid-container-items{ height: 200px; width: 200px; background: red; } </style> </head> <body> <div class="grid-container"> <div class="grid-container-items"></div> <div class="grid-container-items"></div> <div class="grid-container-items"></div> </div> </body> </html>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta