WEB TECHNOLOGIES
IMPORTANT QUESTION AND ANSWERS
SECTION -I
1. Define network.
Ans:Network:Communication between two electronic devices is called Network. A computer network is a collection of
two or more computers which are connected together to share the information and resources. With this people can
share files and peripherals such as modems, printers, scanner etc. In this network each computer is either a client or a
server.
[Link] about search engine.
Ans:Search Engine: Search engine is a software system that is designed to search for information on the World Wide
Web
Examples:
* [Link]
* [Link]
* [Link] etc..
3. What are the percentage of using browsers as per 2022 statistics.
Ans: Web Browser Usage statistics
2022 Statistics:
2022 Edge Google Firefox Opera Safari
4.45 65.87 3.26 2.26 19.16
[Link] is HTML?
Ans: The Hypertext Markup Language or HTML is the standard markup language for documents designed to be displayed
in a web browser.
Syntax: <html>___</html>.
5. Define sections in HTML.
Ans: Sections: The section elements are used to define the different sections of the HTML document. Different section
elements are used to define different parts of a document. For example, the BODY element is used to define the full
body of the document which also includes other section elements such as BODY, SECTION, NAV, ARTICLE, ASIDE,
HEADER, and FOOTER.
6. Write about header section.
Ans: Header Section: Header section is specified by <HEADER>. It is used to define the heading section of an HTML
document. You can use other HTML element such as H1,A, NAV and UL in the HEADER elements to provide the Header
of the HTML document.
7. Write about footer section.
Ans: Footer Section: Footer section is specified by <FOOTER>. It is used to define the footer section of an HTML
document. You can use other HTML element such as H1,A, NAV, and UL in the footer element to provide the footer of an
HTML document.
8. Write about nav and aside section.
Ans: Aside Section: The ASIDE element is newly introduced in HTML5 and allows you to create a section that is used to
display information about the content of other elements. such as time and date, current news, advertising and weather
report.
9. Define CSS.
Ans: CSS stands for Cascading Style sheets. It is a text file with .CSS extension and it is commonly used to define styles
and layouts of web pages written in HTML. A CSS file contains no HTML, it contains only CSS code you simply save it with
the CSS file Extension (CSS).
10. Write about text to decoration properties.
Ans: Text-decoration: This property describes line decorations and effects that are added to the content of an element.
Example: [Link]
hl { text-decoration: overline;}
h2 { text-decoration: line-throug; }
11. Write about text color property in CSS.
Ans: Text-color: The color property is used to set the color of the text.
With CSS, a color is most often specified by:
A HEX value - like "#ff0000"
An RGB value - like "rgb (255,0,0)"
A color name - like "red"
[Link]
body {color: orange;}
12. Write about text align property in CSS.
Ans: Text-align: This property describes how the text is aligned in the HTML document.
EX: [Link]
h1 {text-align: center;}
h2 {text-align: left;}
h3 {text-align: right;}
h4 {text-align: justify;}
13. Write a program on list- style- image property.
Ans: list-style-image: To specify an image as the list item marker, use the list-style-image
property: [Link]
ul
{
list-style-image: URL('[Link]');
}
14. Create a list using CSS.
Ans: [Link]
ul {
list-style-type: circle;
}
ol {
list-style-type: upper-roman;
}
15. What is the use of background image element?
Ans: background-image: The background-image property sets one or more background images for an element. The
background of an element is the total size of the element, including padding and border.
Ex: <style>
</TABLE>
body {background-image:url('[Link]');}
</style>
16. What is the use of background color element?
Ans: background-color: The background-color property sets the background color of an element. The background of an
element is the total size of the element, including padding and border (but not the margin).
Ex:<style>
hl
{
background-color: #6495ed;
}
p{
background-color: #e0ff; }
</style>
17. What is the use of background repeat element.
Ans: background-repeat: The background-repeat property sets if/how a background image will be repeated. By default,
a background-image is repeated both vertically and horizontally.
Repeat: The image is repeated both horizontally and vertically.
18. What is CSS gradients.
Ans: CSS Gradients: CSS gradients are used to display smooth transitions between two or more specified [Link]
defines three types of gradients:
* Linear Gradients (goes down/up/left/right/diagonally)
* Radial Gradients (defined by their center)
* Conic Gradients (rotated around a center point)
19. What is JavaScript.
Ans: JavaScript is a high-level programming language that is widely used for creating dynamic and interactive web
applications. It is a client-side scripting language, which means that it runs in the user's browser, rather than on a server.
20. What are the basic data types in JavaScript.
Ans: Data types: One of the most fundamental characteristics of a programming language is the set of data types it
supports. These are the type of values that can be represented and manipulated in a programming language.
JavaScript allows you to work with three primitive data types"
* Numbers, e.g. 123, 120.50 etc.
* Strings of text e.g. "This text string" etc.
* Boolean e.g. true or false.
21. What are the JavaScript closures?
Ans: JavaScript Closures: A closure is a function that has access to its outer function's variables, even when the outer
function has returned.
[Link] is the difference between ==and=== in JavaScript?
Ans: In JavaScript, == and === are both used for comparison, but they have a key difference:
Loose Equality (==) - Checks if the values are equal, regardless of data type.
- Performs type coercion if necessary (e.g., converts string to number).
Strict Equality (===) - Checks if both the value and data type are equal.
- Does not perform type coercion.
23. What is hosting in JavaScript.
Ans: Hosting in JavaScript: Hoisting is a mechanism where variables and functions are moved to the top of their scope,
regardless of where they are defined.
24. What is the difference between let and var in JavaScript.
Ans: In JavaScript:
Var: Function scope: Variables declared with var are scoped to the nearest function.
Let: Block scope: Variables declared with let are scoped to the nearest block (e.g., if, loop, function).…
[Link] are the different types of JavaScript frameworks?
Ans: JavaScript frameworks come in different types, including front-end, back-end, and full-stack frameworks. Front-end
frameworks such as React, Angular, and Vue are used for developing user interfaces and managing the application's
presentation layer. Back-end frameworks such as [Link], [Link], and Koa are used for server-side programming and
managing data and application logic. Full-stack frameworks such as Meteor and Mean stack provide developers with a
complete set of tools for building end-to-end web applications.
[Link] is [Link]?
Ans: [Link], commonly referred to as React, is an open-source JavaScript Ebrary used for building user interfaces (Uls)
for web applications. It was developed by Facebook and released in 2013, and has since gained widespread popularity
among web developers.
[Link] is [Link]?
Ans: [Link], commonly referred to as Angular, is an open-source front-/ end web development framework
developed by Google. It is a comprehensive framework that allows developers to build complex and dynamic web
applications using a structured and organized approach.
[Link] bootstrap?
Ans: Bootstrap is a popular front-end web development framework that provides a set of pre-designed CSS and
JavaScript components, including buttons, forms, navigation menus, modals, and more, to help developers build
responsive and mobile-friendly websites and applications quickly and easily.
[Link] is the purpose of using Bootstrap.
Ans: The purpose of using Bootstrap:
1. *Responsive Design
2. *Consistency
3. *Time-Saving
4. *Cross-Browser Compatibility
5. *Community Support
Bootstrap simplifies front-end development, enabling developers to build visually appealing, responsive, and consistent
web applications efficiently.
[Link] are the main components of Bootstrap?
Ans: bootstrap components are an essential tool for modern web development
* navigation bar
* buttons
* forms
* modals
* cards
* Alerts
* Icons
* progress bar
[Link] many types of layouts does bootstrap offer?
Ans: Bootstrap offers 5 types of layouts:
1. *Container
2. *Fluid Container
3. *Row
4. *Column
5. *Grid System
[Link] is the bootstop grid system ?
Ans: Bootstrap’s grid system allows up to 12 columns across the page. If you do not want to use all 12 columns
individually, you can group the columns together to create wider columns:
Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it
might look better with the content organized in three columns, but on a small screen it would be better if the content
items were stacked on top of each other.
[Link] out some features of Bootstrap?
Ans: Here are some key features of Bootstrap:
1. Responsive Design
2. Pre-built UI Components
3. Grid System
4. Customizable
5. Mobile-First Approach
6. Cross-Browser Compatibility
7. Extensive Documentation
8. Large Community Support
9. Themes and Templates
10. JavaScript Plugins
[Link] is a Frame work?
Ans: A framework is a pre-designed structure that provides a foundation for building applications, websites, or software
systems. It includes:
1. Pre-built components
2. Standardized architecture
3. Guidelines for development
4. Tools for rapid development
SECTION -II
Long questions and answers
16. Explain bootstrap components.
Ans:List of Bootstrap components:
Navigation Bar. A navigation bar is a component that allows users to navigate a website's pages. Bootstrap's navigation
bar component includes dropdown menus, responsive design, and other fatures.
Buttons: Bootstrap includes a variety of button styles and sizes, including primary, secondary, success, danger, warning,
and info buttons.
Forms: Bootstrap's form components include input fields, checkboxes, radio buttons, dropdowns, and more. The form
components also include validation and error feedback.
Modals: A modal is a component that displays content in a pop-up window. Bootstrap's modal cmponent includes
customizable size, position, and animation options.
Crousels: A carousel is a component that displays a rotating set of images or content. Bootstrap's carousel component
includes support for multiple items, auto-play, and more.
Cards: A card is a component that displays content in a visually appealing way. Bootstrap's card component includes
support for images, text, buttons, and more.
Alerts: An alert is a component that displays important information or notifications to users. Bootstrap's alert
component includes support for different styles and types of alerts.
[Link] do you understand by the bootstrap navbar? How will you create one.
Ans:Navigation Bars: A navigation bar is a navigation header that is placed at the top of the page:
GVJC,MBNR
Home
CGA
RM
AET
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created with <nav class="navbar navbar-default">.
The following example shows how to add a navigation bar to the top of the page:
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="[Link]">
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">GVJC,MBNR</a>
</div>
<ul class="nav navbar-nav'>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">CGA</a></li>
<li><a href="#">RM</a></li>
<li><a href="#">AET</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Basic Navbar Example</h3>
the page.</p>
<p>A navigation bar is a navigation header that is placed at the top of
</div>
</body>
</html>
[Link] network? Explain different types of networks.
Ans:Network:
Communication between two electronic devices is called Network. A computer network is a collection of two or more
computers which are connected together to share the information and resources.
Types of Network:
* LAN (Local Area Network)
* MAN (Metropolitan Area Network)
* WAN (Wide Area Network)
LAN: Local Area Network:
A LAN is a computer network that covers only small area such as an office, home, internet centers or buildings. In this
network, one computer is designated as the file server which stores all the software's that controls the network. Other
computers connected to the file server are called as workstations or clients.
Compare to other networks LAN is a very high-speed network. The speed of LAN is 10 to 100mbps.
MAN: Metropolitan Area Network
A Metropolitan Area Network or MAN is a network connecting devices across an entire town, entire city or any other
small region. This is a network larger than LAN but smaller than the WAN. A MAN is typically owned and operated by a
single entity such as a government body or large corporation or an organization. A MAN network is spread over a
metropolitan area such as a City. It is a collection of local area networks. It may be a single network such as cable
television network.
WAN: Wide Area Network
WAN covers a large geographical area such as countries, continents or even the whole world. These kinds of network
use telephone lines, satellite links or other communication technologies to connect. Multiple LANS or MANS can be
connected together using devices such as bridges, routers, modems or gate ways. The example of largest WAN is
Internet.
[Link] about WWW or W3?
Ans:www (World Wide Web) Or W3
WWW commonly known as web. Sir Tim Berners-Lee invented the World Wide Web in 1989 while working as a software
engineer at CERN, which is the large particle physics laboratory near Geneva, Switzerland.
He had specified the three fundamental technologies that remain the foundation of today's Web (and which you may
have seen appear on parts of your Web browser): HTML, URI (Universal Resource identifier), and HTTP.
WWW Formation: In 1994, Tim Berner's Lee founded the www consortium (W3C) at the Massachusetts institute of
technology with support from CERN, ARPA and the European commission.
[Link] the elements and attributes associated with table tag.
Ans:Here are the elements and attributes associated with the table tag:
Table Elements: 1. table: The main table element.
2. tr (Table Row): Defines a table row.
3. td (Table Data): Defines a table cell.
4. th (Table Header): Defines a table header cell.
5. caption: Defines the table caption.
6. colgroup: Groups one or more columns.
7. col: Defines a column.
8. thead: Groups the header rows.
9. tbody: Groups the body rows.
10. tfoot: Groups the footer rows.
Table Attributes:
1. border: Specifies the border width.
2. cellpadding: Specifies the space between cells.
3. cellspacing: Specifies the space between cells and borders.
4. width: Specifies the table width.
5. height: Specifies the table height.
6. align: Specifies the table alignment.
7. bgcolor: Specifies the table background color.
8. background: Specifies the table background image.
td and th Attributes:
1. rowspan: Specifies the number of rows a cell should span.
2. colspan: Specifies the number of columns a cell should span.
3. align: Specifies the cell alignment.
4. valign: Specifies the cell vertical alignment.
5. width: Specifies the cell width.
6. height: Specifies the cell height.
7. bgcolor: Specifies the cell background color.
[Link] a html program on nested table.
Ans:Here's an example HTML program that demonstrates a nested table:
<!DOCTYPE html>
<html>
<head>
<title>Nested Table Example</title>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
</style>
</head>
<body>
<h2>Nested Table Example</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>
<table>
<tr>
<th>Street</th>
<th>City</th>
<th>State</th>
</tr>
<tr>
<td>123 Main St</td>
<td>New York</td>
<td>NY</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>25</td>
<td>
<table>
<tr>
<th>Street</th>
<th>City</th>
<th>State</th>
</tr>
<tr>
<td>456 Park Ave</td>
<td>Los Angeles</td>
<td>CA</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
[Link] is difference between Internal external and inline style sheets?
Ans:Here's a brief overview of the differences between internal, external, and inline style sheets:
Internal Style Sheet
1. Defined within HTML: Internal styles are written within the <head> section of an HTML document.
2. Applies to single document: Styles only apply to the HTML document in which they are defined.
Limited reusability: Styles cannot be easily reused across multiple HTML documents.
External Style Sheet
1. Defined in separate file: External styles are written in a separate CSS file (e.g., [Link]).
2. Applies to multiple documents: Styles can be linked to multiple HTML documents, making them reusable.
Easy maintenance: Styles can be easily updated in one place, affecting all linked HTML documents.
Inline Style Sheet
1. Defined within HTML element: Inline styles are written directly within an HTML element using the style attribute.
2. Applies to single element: Styles only apply to the specific HTML element in which they are defined.
3. Not recommended: Inline styles can make code harder to read and maintain, and can lead to inconsistencies.
[Link] about text formatting in CSS.
Ans:Text Formatting/Effects Using CSS
Text-decoration:This property describes line decorations and effects that are added to the content of an element.
Example:
[Link]
hl {
text-decoration:overline;
}
h2{
text-decoration:line-through;
}
Text-color: The color property is used to set the color of the text.
With CSS, a color is most often specified by:
A HEX value - like "#ff0000"
An RGB value - like "rgb(255,0,0)"
A color name - like "red"
[Link]
body {color:orange;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);
Text-align: This property describes how the text is aligned in the HTML document.
[Link]
h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}
h4 {text-align:justify;}
Text-Indent: It specifies the indentation applied to first line of inline content in a block.
[Link]
hl {text-indent:2em;}
h2 {text-indent:4em;}
[Link] about CSS box model?
Ans:The CSS Box Model:
The CSS Box Model is a fundamental concept in web development that describes the structure of an HTML element as a
rectangular box. The box model consists of four main parts:
1. Content Area: The innermost part of the box, where the element's content is displayed.
2. Padding: The space between the content area and the border. Padding is used to add space around the content.
3. Border: The visible outline of the box. Borders can be styled with different widths, styles, and colors.
4. Margin: The space between the box and other elements. Margins are used to add space around the box.
Box Model Properties
- width and height:
- *padding
- *border
- *margin
Draw fig 3.3
8. Explain about CSS background elements with the proper examples?
Ans:Here's an explanation of CSS background elements with examples:
Background Color: The background-color property sets the background color of an element.
Example:
div {
background-color: #f2f2f2;
padding: 20px;
}
This sets the background color of the div element to a light gray color.
Background Image: The background-image property sets the background image of an element.
Example:
div {
background-image: url('[Link]');
background-repeat: no-repeat;
background-position: center;
height: 500px;
}
This sets the background image of the div element to [Link], and centers it horizontally and vertically.
Background Repeat: The background-repeat property specifies how the background image should be repeated.
Values:- repeat (default): Repeats the image horizontally and vertically.
- repeat-x: Repeats the image horizontally only.
- repeat-y: Repeats the image vertically only.
- no-repeat: Does not repeat the image.
Example:
div {
background-image: url('[Link]');
background-repeat: repeat-x;
}
This repeats the background image horizontally only.
Background Position: The background-position property specifies the position of the background image.
Values:
- center (default): Centers the image horizontally and vertically.
- top, bottom, left, right: Positions the image at the specified edge.
- x% y%: Positions the image at the specified percentage coordinates.
Example:
div {
background-image: url('[Link]');
background-position: bottom right;
}
This positions the background image at the bottom right corner.
Background Attachment: The background-attachment property specifies whether the background image should scroll
with the content or remain fixed.
Values:- scroll (default): Scrolls the image with the content.
- fixed: Keeps the image fixed in the viewport.
Example:
div {
background-image: url('[Link]');
background-attachment: fixed;
}
13. What are the benefits of using CSS frameworks in web development?
Ans: Here are the benefits of using CSS frameworks in web development:
Faster Development:
1. Pre-built components: CSS frameworks provide pre-designed UI components, saving development time.
2. Standardized code: Consistent coding practices and pre-defined classes simplify development.
Improved Consistency:
1. Uniform design: CSS frameworks ensure a consistent design language throughout the application.
2. Easy maintenance: Standardized code and pre-built components make maintenance easier.
Enhanced Responsiveness:
1. Responsive design: CSS frameworks provide responsive design capabilities, ensuring a smooth user experience across
devices.
2. Mobile-first approach: Many frameworks adopt a mobile-first approach, prioritizing mobile usability.
Simplified Customization:
1. Customizable: CSS frameworks offer customization options, allowing developers to tailor the design to their needs.
2. Easy theme integration: Many frameworks support theme integration, making it easy to change the design.
Community Support:
1. Large community: Popular CSS frameworks have large communities, providing extensive support and resources.
2. Extensive documentation: Well-maintained documentation helps developers learn and use the framework effectively.
14. What is bootstrap and what are its features.
Ans: Key Features of Bootstrap:
1. Responsive Design: Bootstrap's responsive design ensures that your web application adapts to different screen sizes,
devices, and orientations.
2. Pre-built UI Components: Bootstrap offers a wide range of pre-designed UI components, including:
- Navigation bars - Alerts
- Buttons
- Forms
- Tables
- Modals
- Accordions
- and more
3. Grid System: Bootstrap's grid system provides a flexible and responsive way to create layouts. It includes:
- Container classes
- Row classes
- Column classes
4. Customizable: Bootstrap allows for extensive customization through:
- Sass variables
- CSS overrides
- JavaScript plugins
5. JavaScript Plugins: Bootstrap includes a set of JavaScript plugins to enhance UI components, such as:
- Collapse
- Dropdown
- Modal
- Tab
- Tooltip
6. Accessibility: Bootstrap prioritizes accessibility,
7. Browser Support: Bootstrap supports the latest versions of popular browsers, including:
- Google Chrome
- Mozilla Firefox
- Safari
- Microsoft Edge
- Internet Explorer 10+
8. Large Community: Bootstrap has an extensive and active community, providing:
- Documentation
- Tutorials
- Forums
- Third-party plugins and themes.
[Link] about merits and demerits of JavaScript?
Ans: # Merits of JavaScript
1. Client-Side Scripting: JavaScript allows for client-side scripting, which enables developers to create interactive web
pages without requiring server-side processing.
2. Dynamic Nature: JavaScript is a dynamically-typed language, which means it can adapt to changing requirements and
environments.
3. Versatility: JavaScript can be used for both front-end and back-end development, making it a versatile language for
web development.
4. Extensive Libraries and Frameworks: JavaScript has a vast ecosystem of libraries and frameworks, such as React,
Angular, and [Link], which simplify development and improve productivity.
# Demerits of JavaScript
1. Security Concerns: JavaScript's client-side execution makes it vulnerable to security threats, such as cross-site scripting
(XSS) attacks.
2. Browser Incompatibilities: JavaScript can behave differently across various browsers and versions, which can lead to
compatibility issues.
3. Performance Issues: JavaScript's dynamic nature can lead to performance issues, such as slow execution and memory
leaks.
4. Steep Learning Curve: JavaScript's complex syntax and nuances can make it challenging for beginners to learn.
12. What is the Dom in JavaScript and how does it work?
Ans: The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the
structure of a document as a tree of objects, allowing JavaScript to interact with and manipulate the document.
# How the DOM Works:
1. Parsing: When an HTML document is loaded, the browser parses the HTML code and creates a DOM tree.
2. DOM Tree: The DOM tree is a hierarchical representation of the document, with each node representing an element,
attribute, or piece of text.
3. Nodes: Each node in the DOM tree has properties and methods that can be accessed and manipulated using
JavaScript.
4. JavaScript Interaction: JavaScript can interact with the DOM by selecting nodes, reading and writing their properties,
and adding or removing nodes.
# DOM Methods:
1. getElementById(): Selects an element by its id attribute.
2. getElementsByTagName(): Selects elements by their tag name.
3. getElementsByClassName(): Selects elements by their class attribute.
9. Explain about CSS flex box container with proper examples?
Ans: # What is Flexbox?
Flexbox, short for Flexible Box, is a CSS layout model that allows you to design complex layouts with ease. It provides a
flexible and efficient way to manage the layout, alignment, and distribution of elements within a container.
# Flex Container Properties
To create a flex container, you need to apply the following properties:
1. display: Set to flex or inline-flex to create a flex container.
2. flex-direction: Specifies the direction of the flex items (default is row).
3. justify-content: Aligns the flex items along the main axis (default is flex-start).
4. align-items: Aligns the flex items along the cross axis (default is stretch).
5. flex-wrap: Specifies whether the flex items should wrap to a new line (default is nowrap).
# Flex Item Properties
Flex items are the elements within the flex container. You can apply the following properties to flex items:
1. flex-grow: Specifies the growth factor of a flex item (default is 0).
2. flex-shrink: Specifies the shrink factor of a flex item (default is 1).
3. flex-basis: Specifies the initial length of a flex item (default is auto).
Example 1: Basic Flex Container
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 200px;
background-color: #f2f2f2;
}
10. Explain about CSS grid module with proper examples?
Ans: Here's an explanation of the CSS Grid module with examples:
# What is CSS Grid?
CSS Grid is a two-dimensional layout system that allows you to create complex, grid-based layouts with ease. It's a
powerful tool for building responsive, flexible, and maintainable layouts.
# Basic Concepts
Before diving into the examples, let's cover some basic concepts:
- Grid Container: The element that contains the grid.
- Grid Items: The elements within the grid container.
- Grid Tracks: The horizontal and vertical lines that make up the grid.
- Grid Cells: The individual units of space within the grid.
# Grid Container Properties
To create a grid container, you need to apply the following properties:
- display: Set to grid or inline-grid to create a grid container.
- grid-template-columns: Defines the number and size of columns.
- grid-template-rows: Defines the number and size of rows.
# Grid Item Properties
Grid items can be styled using the following properties:
- grid-column: Specifies the column(s) an item should occupy.
- grid-row: Specifies the row(s) an item should occupy.
# Examples
Example 1: Basic Grid
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
}