Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Set the following properties with the grid property: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow property.ExampleYou can try to run the following code to implement the CSS grid propertyLive Demo .container { display: grid; grid: 100px / auto auto; grid-gap: 10px; background-color: red; padding: 10px; } .container>div { background-color: yellow; text-align: center; padding:10px 0; font-size: 20px; } 1 2 3 4 5 6
Use the justify-content property with value center to align the flex-items to the center.ExampleYou can try to run the following code to implement the center value −Live Demo .mycontainer { display: flex; background-color: red; justify-content: center; } .mycontainer > div { background-color: orange; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4
To set the width of each column in Grid Layout, use the grid-template-columns property.ExampleYou can try to run the following code to implement it −Live Demo .container { display: grid; background-color: gray; grid-template-columns: 120px 80px 50px; padding: 20px; grid-gap: 20px; } .container > div { background-color: yellow; border: 2px solid gray; padding: 35px; font-size: 30px; text-align: center; } Game Board 1 2 3 4 5 6
Use the grid-template-rows property to define the number of rows in CSS Grid Layout.ExampleYou can try to run the following code to set a number of rows.Live Demo .container { display: grid; background-color: gray; grid-template-rows: 120px 90px 100px; padding: 20px; grid-gap: 20px; } .container > div { background-color: yellow; border: 2px solid gray; padding: 35px; font-size: 30px; text-align: center; } Game Board 1 2 3 4 5 6
A JSON is a lightweight, text-based and language-independent data exchange format. A JSON can represent two structured types like objects and arrays. We can decode a JSON object using JSONObject and JSONArray from json.simple API. A JSONObject works as a java.util.Map whereas JSONArray works as a java.util.List.In the below example, we can decode a JSON object.Exampleimport org.json.simple.*; import org.json.simple.parser.*; public class JSONDecodingTest { public static void main(String[] args) { JSONParser parser = new JSONParser(); String str = "[ 0 , {\"1\" : { \"2\" : {\"3\" : {\"4\" : [5, { \"6\" : { \"7\" : 8 } } ] } ... Read More
You can try to run the following code to use a max-width property to make your video player responsive −ExampleLive Demo video { max-width: 100%; height: auto; } To check the effect, you need to resize the browser.
Use the flex-direction property with row value to set the flex-items horizontally, from right to left.ExampleYou can try to run the following code to implement the row-reverse value −Live Demo .mycontainer { display: flex; flex-direction: row-reverse; background-color: orange; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4 Q5 Q6
To position text to top left, use the left and top property. You can try to run the following code to position text to left position on an image −ExampleLive Demo .box { position: relative; } img { width: 100%; height: auto; opacity: 0.6; } .direction { position: absolute; top: 10px; left: 19px; font-size: 13px; } Heading One Below image has text in the top left: Top Left Corner
Use the align-content property with value flex-start to set the flex lines in the beginning.ExampleYou can try to run the following code to implement the flex-start value −Live Demo .mycontainer { display: flex; height: 200px; background-color: blue; align-content: flex-start; flex-wrap: wrap; } .mycontainer > div { background-color: orange; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Queue Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8
You can try to run the following code to achieve responsiveness for background image with CSS −ExampleLive Demo div { width: 100%; height: 300px; border: 2px dashed blue; background-image: url('https://www.tutorialspoint.com/python/images/python-data-science.jpg'); background-repeat: no-repeat; background-size: contain; } To check the effect, you need to resize the browser.